Meteor.js: how to swap partial templates in and out of the main page

Question

Just starting with meteor. Looking for a way to have a single "main page", which would contain an area, in which different partial templates could be swapped in and out, at a click of a Next/Previous buttons. I understand how to include partial templates statically by using {{> step_1_Template}} syntax. What I need, is to have the Next/Previous buttons permanently on the main page, and, when the Next button is clicked - remove the {{> step_1_Template}} and insert the {{> step_2_Template}}. How is this done?

Answer 1

My knee-jerk reaction is that you should just use iron-router. However, that may only make sense if you are swapping out templates based on routes. If you are sticking with the same route and only changing the partials then you can accomplish this with session variables.

When the user clicks the 'next' button you can set a session variable like:

Template.myTemplate.created = function() {
  Session.setDefault('currentStep', 1);
};

Template.myTemplate.events({
  'click #next': function() {
    var step = Session.get('currentStep');
    return Session.set('currentStep', step + 1);
  }
});

Then you can add a helper like:

Template.myTemplate.helpers({
  isStep: function(n) {
    return Session.equals('currentStep', n);
  }
});

Finally your template can select the proper partial based on the session:

<template name='myTemplate'>
  {{#if isStep 1}}
    {{> step_1_Template}} 
  {{/if}}
  {{#if isStep 2}}
    {{> step_2_Template}} 
  {{/if}}
</template>