Dileet
Dileet

Reputation: 2064

Meteor route to individual page

I'm creating a portfolio using meteor and am successfully looping through portfolio items in the database (created with fixtures). I'm having issues trying to press on an item and go to it's specific page. I'm sure this is simple, but I'm pretty new to Meteor.

My structure is as follows:

Collection:

PortfolioItems = new Mongo.Collection('portfolioItems');

Publication:

Meteor.publish('portfolioItems', function() {
    return PortfolioItems.find();
});

Portfolio Page Template:

<template name="portfolio">
<h1>Portfolio</h1>
<hr>
{{#each portfolioItems}}
    {{> portfolioItem}}
{{/each}}

<a href="{{pathFor 'home'}}">Go Back Home</a>
</template>

Portfolio Page Template Helper:

Template.portfolio.helpers({
    portfolioItems: function() {
        return PortfolioItems.find({});
    }
});

Portfolio Item Template:

<template name="portfolioItem">
<h1>{{title}}</h1>
</template>

And finally my routes:

Router.configure({
    layoutTemplate: 'layout',
    loadingTemplate: 'loading',
    notFoundTemplate: 'notFound'
});


Router.route('/', function() {
    this.render('home');
}, {
    name: 'home'
});

Router.route('/about', function() {
    this.render('about');
});

Router.route('/portfolio', function() {
    this.render('portfolio');
}, {
    name: 'portfolio',
    waitOn: function() {
        return Meteor.subscribe('portfolioItems');
    }
});

Upvotes: 0

Views: 82

Answers (1)

Ethaan
Ethaan

Reputation: 11376

First Create the route.

Router.map(function () {
  this.route('portfolioItem', {
    path: '/portfolioIndividual/:_id',
      waitOn: function(){
    return Meteor.subscribe('portfolioItems');
    },
    data: function(){
     if(this.ready()){
       return PortfolioItems.findOne({_id: this.params._id});
     }else{
       this.render('loading') 
     }      
    }
  });
}); 

html:

<template name="portfolio">
{{#each portfolioItems}}
  <a href="/portfolioIndividual/this._id">Take a look at this awesome photo</a>
 {{/each}}
</template>

<template name="portfolioItem">
  <!-- portfolio item content -->
</template>

Upvotes: 1

Related Questions