Meteor: Pulling variable from iron router to a template - meteor

I am trying to get two variable from the iron router so that I can essentially call them in my temlate such as {{user.telephone}} and {{pic.profilepic}}.
My code in the router is as follows. (Does Not Work!)
Router.route('/profile/:_id', {
name: 'profile',
template: 'profile',
data:function(){
return {
user:Info.findOne({_id:this.params._id}),
pic: Profilepics.findOne({_id:this.params._id})
};
},
subscriptions: function(){
return {
Meteor.subscribe("userInfo"),
Meteor.subscribe( "profilepic");
},
action:function (){
if (this.ready()){
this.render();
}else {
this.render('loading');
}
}
});
I able to do just one variable with the following code. i.e get {{user.telephone}}. Any chance anyone can help me get both variable instead of just one?
enterRouter.route('/profile/:_id', {
name: 'profile',
template: 'profile',
data:function(){
return {
user:Info.findOne({_id:this.params._id})
};
},
subscriptions: function(){
return Meteor.subscribe("userInfo")
},
action:function (){
if (this.ready()){
this.render();
}else {
this.render('loading');
}
}
});

If you are using the latest version of iron router, i suggest you update the code to something a bit more modern.
First you create a general app controller:
ApplicationController = RouteController.extend({
layoutTemplate: 'DefaultLayout',
loadingTemplate: 'loading_template',
notFoundTemplate: '404_template',
});
Then you start to extend it for different purposes:
ProfileController = ApplicationController.extend({
show_single: function() {
this.render('profile');
}
});
After this you can create your routes for the profile part
Router.route('/profile/:_id', {
controller: 'ProfileController',
action: 'show_single',
waitOn: function() {
return [
Meteor.subscribe("userInfo"),
Meteor.subscribe("profilepic")
];
},
subscriptions: function() {
this.subscribe("somethingyoudontneedtowaitfor", this.params._id);
},
data: function() {
if (this.ready()) {
return {
user: Info.findOne({
_id: this.params._id
}),
pic: Profilepics.findOne({
_id: this.params._id
})
};
}
}
});
It might be a bit more code, but it gives you complete control over what it does. Also, using this, while the router is waiting for the subscriptions to be ready, it displays the loading template defined above. If you don't want to display the loading, you move the subscriptions out of waiton.

Return multiple subscriptions as an array from subscriptions function,
Use return [
Meteor.subscribe("userInfo"),
Meteor.subscribe( "profilepic")
];
instead of
return { Meteor.subscribe("userInfo"), Meteor.subscribe( "profilepic"); which has {} mismatch.

In a similar situation I have
data: function() {
var gridId = this.params._gridId;
return (People.find({gridId: gridId})
&& GridLog.find({gridId: gridId}));
},
with the subscribe calls in the waitOn() handler as part of the Boolean status
waitOn: function() {
return (Meteor.subscribe('people', this.params._gridId)
&& Meteor.subscribe('gridlog', this.params._gridId) );
},
You may have more success just &&ing them together in waitOn() (as strange as that seems).

Related

Page not showing single database entry in Meteor

I have set up my app with Iron Router and have a 'post' page where I would like to show a single post according to its ID. However, this page does not show a post, and instead the post template renders blank (although the url and nav are working fine). Here is my code:
router.js
Router.route('postDetail', {
path: '/posts/:_id',
notFoundTemplate: 'postNotFound',
waitOn: function() {
return [
Meteor.subscribe('post')
]
},
data: function() {
var idVar = this.params._id
return posts.findOne({_id: idVar});
}
});
postDetail.html
<template name="postDetail">
{{address}}
</template>
postsPub.js
Meteor.publish('posts', function () {
return posts.find();
});
Meteor.publish('post', function (id) {
return posts.find(id);
});
It looks like your publisher needs an id. Try this in your waitOn:
Meteor.subscribe('post', this.params._id)
I was able to solve this issue by simply removing the 'post' publish function, and including the following route which refers to the 'posts' publish function instead:
Router.route('postDetail', {
path: '/posts/:_id',
notFoundTemplate: 'postNotFound',
waitOn: function() { return Meteor.subscribe('posts'); },
data: function() { return posts.findOne(this.params._id); }
});

Data isnt loaded on page refresh, only on transitions

I currently have a problem with data not being ready upon full page refreshes. I get the following error
TypeError: Cannot read property 'earnings' of undefined
However, the data gets loaded correctly when I transition to the route through a pathFor link from another template.
I have the following route defined:
this.route('overview', {
path: '/overview',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
waitOn: function() {
Meteor.subscribe('overviewData');
},
data: function() {
return {
earnings: Meteor.user().earnings,
};
},
onAfterAction: function() {
SEO.set({
title: 'Overview | ' + SEO.settings.title
});
}
});
Which subscribes to this publication:
Meteor.publish('overviewData', function() {
if (!this.userId) { return null; }
return [
Meteor.users.find(this.userId, { fields: { earnings: 1} }),
Tabs.find({ userId: this.userId })
];
});
Piece of template referencing data:
<div class="period pull-left">
Period <span class='amount'>{{earnings.period}}</span>$
</div>
Try this.ready() before sending data, and also add return in waitOn function
try the following code
this.route('overview', {
path: '/overview',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
waitOn: function() {
return Meteor.subscribe('overviewData');
},
data: function() {
if(this.ready()){
return {
earnings: Meteor.user().earnings,
}
}
},
onAfterAction: function() {
SEO.set({
title: 'Overview | ' + SEO.settings.title
});
}
});
EDIT
This works because this.ready() will be true only after the subscriptions which are returned by waitOn() function completed.
In your code your sending the data without checking whther the data is subscribed or not(or the data is sent to client or not). So it return undefined
I think this may be caused by the fact that it takes a moment for the browser to read the cookie data to log back in. Maybe try adding an onBeforeAction for your route that checks if the user is logging in before rerouting.
this.route('overview', {
path: '/overview',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
waitOn: function() {
Meteor.subscribe('overviewData');
},
data: function() {
return {
earnings: Meteor.user().earnings,
};
},
onBeforeAction: function() {
if (!Meteor.user()) {
if (Meteor.loggingIn())
this.render('loadingTemplate');
}
else {
this.next();
}
},
onAfterAction: function() {
SEO.set({
title: 'Overview | ' + SEO.settings.title
});
}
});
Meteor users are a reactive data source, so the route should run again when loggingIn() is finished and shouldn't throw an undefined error.

Route loads notFound briefly first

I have a iron route that searches for a collection item based on the url param. If it finds it, it returns the item as a data context, otherwise it renders a notFound template. The code looks like this:
this.route('profileView', {
path: list_path + '/profiles/:_id',
fastRender: true,
waitOn: function() {
if (Meteor.user()) {
return [Meteor.subscribe('singleProfile', this.params._id, Session.get("currentListId"))];
}
},
data: function() {
var profile = Profiles.findOne({
_id: this.params._id
});
if (!profile) {
this.render("notFound");
} else
return profile;
}
});
The problem is the notFound template gets loaded briefly prior to profile getting returned, although I thought the waitOn function would have handled that. What's the correct pattern to have the desired result using iron router? Thanks.
Is it possible that you forgot to configure the loading and dataNotFound hooks?
Router.onBeforeAction('loading');
Router.onBeforeAction('dataNotFound');
If you want to understand what is actually going on here, please look here.
I had to check for this.ready() in data. Updated code
this.route('profileView', {
path: list_path + '/profiles/:_id',
fastRender: true,
waitOn: function() {
if (Meteor.user()) {
return [Meteor.subscribe('singleProfile', this.params._id, Session.get("currentListId"))];
}
},
data: function() {
if(this.ready()){
var profile = Profiles.findOne({
_id: this.params._id
});
if (!profile) {
this.render("notFound");
} else
return profile;
}
}
});

Meteor JS Iron Router subscribe to data

I am using Meteor 0.8 and iron-router.
I have a single route that I use to subscribe to a number of collections. What I would like to do is create a document when you arrive on the route and then subscribe to it so I can access it.
This is my route:
this.route('product_collection', {
path: '/collection/:collection',
template: 'product_collection',
layoutTemplate: 'layout-new',
waitOn: function() { return [ Meteor.subscribe('specific_product_collection', this.params.collection), Meteor.subscribe('product_types')] },
data: function () { return ProductCollections.findOne({ url: this.params.collection }) },
onBeforeAction: function(pause){
//Prevent double rendering
if (this.ready()) {
var productType = ProductTypes.findOne({url: this.params.collection })
console.log(productType)
if(productType){
var product = {
productType: productType._id
};
Session.set("productTypeId", productType._id);
Products.insert(product, function(error, id) {
if (error) {
console.error(error);
set_notification('Oops, something went wrong.', 'Please try again later.');
} else {
Session.set("productId", id);
Session.set("productName", productType.name );
//Not working
Meteor.subscribe('specific-product', id);
console.log('should be subscribed')
}
});
}
} else {
console.log('loading')
this.render('loading');
pause();
}
},
});
Ok,
I found out the ID was different on the server vs client side location. So ended up writing a meteor method call on the server.
See reference: Retrieve _id after insert in a Meteor.method call

Data not accessible in helper block in Meteor

I have autopublish on.
Template.play.helpers ({
title: function () {
wcount = Workouts.find().count();
console.log(wcount);
}
});
This gives me 0.
But if I'm in the developer console of my browser.
Workouts.find().count()
24
I have recently upgraded to 0.8
If I add waitOn to the Router then I get this behavior every other time I load the page.
Router.map(function() {
this.route('splash', {path: '/'});
this.route('play', {
path: '/play',
template: 'play',
waitOn: function() {
return Meteor.subscribe('Workouts')
}
});
After some help from #Christian Fritz it seems that my problem is that its not waiting on my subscription and if the helper doesn't return anything because its undefined then it doesn't get rerun when the data does get loaded.
I have now turned off autopublish. My server/publications.js is:
Meteor.publish('workouts', function() {
return Workouts.find();
});
My router is:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
Router.map(function() {
this.route('splash', {path: '/'});
this.route('play', {
path: '/play',
template: 'play',
waitOn: function() {
return Meteor.subscribe('workouts')
}
});
});
in play.js
var workoutsSubcription = Meteor.subscribe('workouts');
console.log("workoutsSubscription.ready() is ",workoutsSubcription.ready());
returns:
workoutsSubscription.ready() is false
once or twice then finally reruns when its fully loaded as true. But shouldn't the waitOn mean that it doesn't run that page until the data is there?
You probably want something like this:
var workoutsSubcription = Meteor.subscribe('workout_count');
Template.play.helpers ({
title: function () {
if(workoutsSubcription.ready()){
wcount = Workouts.find().count();
}
}
});
You would need to publish your subscription on the server as well
Meteor.publish("workout_count", function () {
return Workouts.find();
});

Resources