Detecting browser refresh in meteor

Question

I have a container template called "questionnaire" which displays question one after another on click of next button. When next button is clicked, there is some logic in the background that will provide me the route of next question. And I will just change the question template within the questionnaire.

<template name="questionnaire">
    <h1>Snapwiz questionnaire</h1>
    <h3>Question</h3>
    {{> yield region="singleQuestion"}}
    <button class="next">Next</button>
</template>

Template.questionnaire.events({
    'click .next':function(event,template){ 
           Meteor.call('nextQuestion',Router.current().params._id,function(err,res){
            if(res){
                Router.go('/question/'+res);
            }
        });
    }
});

Router.route('questionnaire',{
    yieldTemplates:{
        'question1':{to:'singleQuestion'}
    }
});

Router.route('question',{
    path:'question/:_id',
    action:function(){
        this.render('question'+this.params._id,{to:'singleQuestion'});
    }
});

There are many simple question templates like "question1", "question2",etc, that just gets displayed on click of next button.

When we first hit the link "http://localhost:4000/questionnaire". "question1" template is displayed by default. Now as the user clicks "next" button, we fetch the question id from the server and display that question template. So clicking on next button would land us to "http://localhost:4000/question/2", displaying us the question2 template.

So far everything works smooth.

But the problem arises when we put "http://localhost:4000/question/2" directly in the browser and reload. The page comes blank as its container is not loaded.

So what would be the ultimate fix for this? I feel if we detect "hot push code" in the router then may be we can render the container template too, but how should we do this?. And I am NOT sure which is the best approach.

Any thoughts or help appreciated.

Answer 1

Inside the action callback, you never told Iron Router to use questionnaire as the layout template. To fix this, you just need to call this.layout:

action: function () {
    this.layout('questionnaire');
    this.render('question' + this.params._id, {to: 'singleQuestion'});
}