0

我正在使用流星尝试使用反应变量在两个选项卡之间切换主面板中的内容。我已经能够自己成功地测试内容，所以我相当有信心问题在于反应式 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>
4

1 回答 1

0 
{{ > Template.dynamic template=tab}}

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

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

Template.currentTab.set();

这是你应该这样做的地方。相反，您调用set()的是 的currentTab属性Template，我认为它不存在。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)
    }
});
于 2016-11-04T19:36:41.940 回答