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();

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

currentTab

流星简单的反应变量

1 个答案: