为什么我的模板的 if 子句不是响应式更新？

Question

无论出于何种原因，我都无法通过无数小时的故障排除来解决此问题。我有一些简单的助手使用 Bootstrap 3 nav-tabs 列表。

我想根据哪个列表项处于活动状态来呈现不同的模板。这是我的帮手：

Template.Profile.helpers({
  'personal':function(){
    if($('.profile-info').hasClass('active')) {
      return true;
    } else {
      return false;
    }
  },
  'groups':function(){
    if($('.profile-groups').hasClass('active')) {
      return true;
    } else {
      return false;
    }
  },
  'commitments':function(){
    if($('.profile-commitments').hasClass('active')) {
      return true;
    } else {
      return false;
    }
  }
});

这是我的 HTML:

<ul class="nav nav-tabs">
    <li class="active profile-info"><a href="#">Personal Info</a></li>
    <li class="profile-groups"><a href="#">Groups</a></li>
    <li class="profile-commitments"><a href="#">Commitments</a></li>
</ul>

{{#if personal}}
    {{> ProfilePersonal}}
{{else}}
    {{#if groups}}
        {{> ProfileGroups}}
    {{else}}
        {{> ProfileCommits}}
    {{/if}}
{{/if}}

Answer 1

单击选项卡时不会重新运行帮助程序，因为没有反应性数据更改会使计算无效。

一种更像 Meteor 的方法是添加一个反应变量来保存选项卡状态并在事件侦听器中更改它。

<template name="Profile">
  <ul class="nav nav-tabs">
  {{#each tabs}}
    <li class="{{isActive @index}} profile-{{name}}"><a href="#">{{title}}</a></li>
  {{/each}}
  </ul>
  {{> Template.dynamic template=tpl}}
</template>

@index 引用当前循环的索引，它作为参数提供给 isActive 助手。

然后，您的 JavaScript 文件可以包含选项卡的定义和处理代码：

var tabs = [{
  idx: 0,
  name: "info",
  title: "Personal Info",
  template: "ProfilePersonal"
}, {
  idx: 1,
  name: "groups",
  title: "Groups",
  template: "ProfileGroups"
}, {
  idx: 2,
  name: "commitments",
  title: "Commitments",
  template: "ProfileCommits"
}];

选项卡是一个普通的 JS 数组。以下代码在模板的上下文中使用它们：

Template.Profile.helpers({
  // get current sub-template name
  tpl: function() {
    var tpl = Template.instance();
    return tabs[tpl.tabIdx.get()].template;
  },
  // get the tabs array
  tabs: function() {
    return tabs;
  },
  // compare the active tab index to the current index in the #each loop.
  isActive: function(idx) {
    var tpl = Template.instance();
    return tpl.tabIdx.get() === idx ? "active" : "";
  }
});

Template.Profile.events({
  'click .nav-tabs > li': function(e, tpl) {
    tpl.tabIdx.set(this.idx);
  }
});

Template.Profile.onCreated(function() {
  this.tabIdx = new ReactiveVar();
  this.tabIdx.set(0);
});

创建模板时 (onCreated())，添加了一个新的反应变量作为实例变量。然后可以在帮助程序中访问此变量并在事件处理程序中进行设置。

事件处理程序接收事件对象和模板实例作为参数，并将数据上下文设置为this指针；因此，tpl.tabIdx 指的是反应变量，this 指的是代表被点击选项卡的对象（例如，

{
  idx: 0,
  name: "info",
  title: "Personal Info",
  template: "ProfilePersonal"
}

对于第一个选项卡，因为这是呈现第一个选项卡时模板的数据上下文。

辅助函数通过调用 Template.instance() 获得 Template 实例。然后，它查询反应数组的值。

这会在反应式上下文中创建一个计算（助手是反应式上下文，当它们创建的计算无效时它们会重新运行，并且当 Mongo 游标或反应式时会发生这种情况在计算中读取的变量已更改）。

因此，当在事件处理程序中设置反应变量时，助手会重新运行并且模板会反映新值。

这些都是 Meteor 的基础，在完整的 Meteor 文档和许多资源中都有解释。

为什么我的模板的 if 子句不是响应式更新？

Why aren't my template's if clauses update reactively?

javascript

helpers

meteor

spacebars