Javascript 如何在模板之间进行更改以在Meteor/Jscript中显示不同的媒体

我目前正试图有3个单独的模板，用户可以通过点击其中一个按钮切换。通过使用会话变量（'currentContent'）、3个按钮和3个模板，我看不出我当前的代码出了什么问题

在我的javascript中：

 Template.priority.helpers({
  expensesbtn:function(){
   return Session.get('currentContent') ==='expenses'?true:false;
  },
  custombtn:function(){
   return Session.get('currentContent') ==='cexpenses'?true:false;
  },
  incomebtn:function(){
   return Session.get('currentContent') ==='earning'?true:false;
  },


});

Template.priority.events({
"click #expensesbtn":function(event, template){
  Session.set('currentContent', 'expenses')
},
"click #custombtn":function(event, template){
  Session.set('currentContent', 'cexpenses')
},
"click #incomebtn":function(event, template){
  Session.set('currentContent', 'earning')
}

});

然后在我的html中：

  {{>priority}}
       {{#if cexpenses}}
           {{> cexpenses}}
       {{/if}}
       {{#if expenses}}
           {{> expenses}}
       {{/if}}
       {{#if earning}}
           {{> earning}}
       {{/if}}

---

在此方面的任何帮助都将不胜感激。谢谢

在HTML中使用助手时，它们必须相同，因此您的js应该如下所示：

Template.priority.helpers({
  expenses: function(){
   return Session.get('currentContent') === 'expenses';
  },
  cexpenses: function(){
   return Session.get('currentContent') === 'cexpenses';
  },
  earning: function(){
   return Session.get('currentContent') === 'earning';
  }
});

---

@Sindis是对的，您的助手名称必须与您在模板中调用的名称相匹配。但另一个问题是，虽然条件不在名为

priority

的模板中，但您的助手附加到

priority

模板，因此即使名称匹配，也无法识别它们。您可以通过将所有内容放在优先级模板中，并将按钮分离到单独的子模板（如果您有意的话）来解决此问题

通过只使用一个会话变量

chosenTemplate

和一个助手并避免重复所有这些条件，还可以使代码更加优雅。然后使用Meteor的来显示正确的模板。下面是一个示例解决方案。制作一个名为

templateControl

的新模板，并将按钮放在其中。然后将所有内容放入

优先级
模板中

<template name="priority">
  {{> templateControl }}
  {{> Template.dynamic template=chosenTemplate }}
</template>

<template name="templateControl">
  {{#each buttons}}
    <button id="{{ id }}" class="chose-template">{{ label }}</button>
  {{/each}}
</template>

Template.templateControl.helpers
  buttons: [
    { id: 'incomebtn', label: 'Income' },
    { id: 'expensesbtn', label: 'Expenses' },
    { id: 'custombtn', label: 'Custom' }
  ]

Template.templateControl.events
  'click .chose-template': function(e, t) {
    Session.set('chosenTemplate', this.id);
  }

Template.priority.helpers
  chosenTemplate: function(e, t) {
    return Session.get('chosenTemplate');
  }


{{>templateControl}}
{{>Template.dynamic Template=chosenTemplate}
{{{#每个按钮}
{{label}}
{{/每个}}
Template.templateControl.helpers
按钮：[
{id:'incomebtn'，标签：'Income'}，
{id:'expensesbtn'，标签：'Expenses'}，
{id:'custombtn'，标签：'Custom'}
]
Template.templateControl.events
“单击。选择模板”：函数（e，t）{
Session.set（'chosenTemplate'，this.id）；
}
Template.priority.helpers
chosenTemplate：函数（e，t）{
return Session.get（'chosenTemplate'）；
}

然后确保为您在与
chosenTemplate
会话变量中设置的模板ID对应的名称之间切换的三个模板指定名称

希望这有帮助