流星简单反应变量

Question

我正在使用流星尝试使用响应式 var 在两个选项卡之间切换主面板中的内容。我已经能够自己成功地测试内容，所以我相当有信心问题在于反应式 var 代码。具体来说，我认为问题出在 tab: function() 但经过多次搜索和阅读文档后，我还没有找到解决方案。

相关js：

Template.content.onCreated( function() {
   this.currentTab = new ReactiveVar('form');
});

Template.content.helpers({
   tab: function() {
       return Template.instance().currentTab.get();
   }
});

Template.content.events({
  'click .nav li': function (event, template) {
      var currentTab = $( event.target ).closest( "li" );

      currentTab.addClass( "active" );
      $( ".nav li" ).not( currentTab ).removeClass( "active" );

      Template.currentTab.set();
  }
});

相关的html：

<template name ="content">
    <ul class ="nav">
        <li data-template="form"><a href="#">Form</a></li>
        <li data-template="results"><a href="#">Results</a></li>
    </ul>
    {{ > Template.dynamic template=tab}}
</template>         

Answer 1

{{ > Template.dynamic template=tab}}

这是调用tab 助手来获取一个字符串，该字符串是您要在此处显示的模板的名称。它应该第一次工作，因为您首先将currentTab 的值设置为“form”。

要更改显示的模板，您需要将currentTab 的值更改为与新模板名称匹配的字符串。你没有这样做。

Template.currentTab.set();

这是你应该这样做的地方。相反，您在Template 的currentTab 属性上调用set()，我认为它不存在。 Template 大写 T 是 Meteor 对象，而不是我认为您要引用的模板实例。要为currentTab 设置新值，您实际上需要提供一个值。像这样：

Template.content.events( {
    'click .nav li': function(event, instance) {
        //logic to decide which template you want to show
        //and put the name of that template in templateName

        instance.currentTab.set(templateName)
    }
});