Not found page appears for a second - Meteor - iron - router
I updated my app to Meteor 1.0 and updated my router.js
because I can't use anymore .wait()
. However, now my not found page appears for only a second until the "real page" appears. How can I fix this?
Here is my code:
this.route('gamePage', {
path: '/game/:slug/',
onBeforeAction: [function() {
this.subscribe('singlePlayer', this.params.slug);
var singlePlayer = this.data();
if (singlePlayer) {
if (singlePlayer.upgrade) {
this.subscribe('upgrades', this.params.slug);
}
}
this.next();
}],
data: function() {
return Games.findOne({slug: this.params.slug});
},
waitOn: function() { return [Meteor.subscribe('singleGame', this.params.slug)]}
});
Any help would be greatly appreciated.
source to share
Try using a template subscriptions
.
this.route('gamePage', {
path: '/game/:slug/',
subscriptions: function() {
return Meteor.subscribe('singlePlayer', this.params.slug);
},
onBeforeAction: function() {
var singlePlayer = this.data();
if (singlePlayer) {
if (singlePlayer.upgrade) {
this.subscribe('upgrades', this.params.slug);
}
}
this.next();
},
data: function() {
return Games.findOne({slug: this.params.slug});
},
waitOn: function() { return [Meteor.subscribe('singleGame', this.params.slug)]}
});
However, it is important that you also include the plugin loading
to take advantage of loadingTemplate
.
Router.configure({
loadingTemplate: 'loading' // general purpose loading template
});
// built in plugin.. surprisingly not clearly specified in current docs, but you can dive in the code for plugins.
// https://github.com/EventedMind/iron-router/blob/devel/lib/plugins.js
Router.onBeforeAction('loading', { only: ['gamePage'] }); // only show loading for pages with subscriptions
Router.map(function() {
this.route('gamePage',{
//... your other options here ..
loadingTemplate: 'gamePageLoading', // game Page dedicated loading markup.
});
});
There is also a pattern this.ready()
if you want to stay in your implementation onBeforeAction
.
this.route('gamePage', {
path: '/game/:slug/',
onBeforeAction: [function() {
this.subscribe('singlePlayer', this.params.slug);
if(this.ready()) {
var singlePlayer = this.data();
if (singlePlayer) {
if (singlePlayer.upgrade) {
this.subscribe('upgrades', this.params.slug);
}
}
this.next();
} else {
this.render('loading');
}
}],
data: function() {
return Games.findOne({slug: this.params.slug});
},
waitOn: function() { return [Meteor.subscribe('singleGame', this.params.slug)]}
});
Source: https://github.com/EventedMind/iron-router/blob/devel/Guide.md#subscriptions
I think this change was necessary because the template was .wait
seen as unnecessary chaining and prone to errors (coding). In addition, explicit handling .next()
when overridden onBeforeAction
now ensures that this hook (and probably most, if not all, other hooks) is properly synchronized.
source to share