Reputation: 2064
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
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