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

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-12 10:04:12

问题


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?


回答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>


来源:https://stackoverflow.com/questions/22918869/meteor-js-how-to-swap-partial-templates-in-and-out-of-the-main-page

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!