流星:每个模板范围都有反应吗？

Question

我在同一页面上的多个(任意多个)位置渲染相同的Handlebars模板.在每个模板中,我想要一个按钮来切换div的可见性.当我保存此状态时Session.set,单击一个按钮显然会切换所有模板实例中不需要的所有div.

我可以保存状态在模板实例的数据上下文(这势必会this.data在Template.myTemplate.rendered和Template.myTemplate.created回调),但有两个问题这一点.

1. this.data 不是反应数据源,因此不会传播到div
2. 我没有访问模板实例Template.myTemplate.events(如meteor-core所讨论的)

最后,我可以以某种方式将它保存到一个集合中.但是,我如何唯一地标识每个呈现的模板的状态？jQuery可能也有一种hacky方式,但这不是我想要开发应该与反应模板一起使用的Meteor应用程序的方式.特别是,当该模板变得更复杂时.

我是否遗漏了某些东西,或者是否真的没有与AngularJS的控制器等效的$scope每个模板实例化的传递？

更新:我在考虑这样的事情.

template.html:

<template name="jsonObject">
    <input type="button" />
    <div class="{{hidden}}">content</div>
</template>

client.js:

Template.jsonObject.hidden = function(){
    var ret = "";
    if (this._hidden) {
        ret = "hidden";
    }
    return ret;
};

Template.jsonObject.events({
    'click input' : function(event, template){
        template.data._hidden = true;
    }
});

Answer 1

所有其他答案都太复杂和/或过时.从Meteor 1.0开始,维护每个模板状态的推荐解决方案是使用存储在模板实例中的反应变量:

模板实例对象表示文档中模板的出现.它可以用于访问DOM,并且可以为其分配属性,这些属性在模板被反应更新时持久存在.[...]您可以为对象分配您选择的其他属性.

reactive-var核心包提供了反应变量:

ReactiveVar包含可以获取和设置的单个值,这样根据通常的响应数据源合同,调用set将使所调用的任何Computations无效get.

您的代码变为:

Template.jsonObject.onCreated = function () {
  this.hidden = new ReactiveVar(false);
};

Template.jsonObject.helpers({
  hidden: function () {
    return Template.instance().hidden.get() ? 'hidden' : '';
  }
});

Template.jsonObject.events({
  'click input': function (event, template) {
    template.hidden.set(true);
  }
});

HTML与您期望的相同:

<template name="jsonObject">
  <button>Click Me</button>
  <p>Hidden is {{hidden}}.</p>
</template>

Answer 2

我认为关于流星核心的讨论已经过时了（尽管它是最近的）。根据文档（下面引用），这应该是可能的：

Template.myTemplate.events({
   foo: function(event, template) {
      var _div = template.find('...');
   }
});

处理程序函数接收两个参数：事件（包含事件信息的对象）和模板（定义处理程序的模板的模板实例）。处理程序还在此接收一些附加的上下文数据，具体取决于处理事件的当前元素的上下文。在 Handlebars 模板中，元素的上下文是该元素出现的 Handlebars 数据上下文，由块助手（例如 #with 和 #each）设置。

更新

假设每个可隐藏的 div 都有一个唯一的 id，如果您尝试这样的操作会怎样？我还没有测试过。

Template.jsonObject.hidden = function(){
    var _id = $(".classOfPossibleHiddenDiv").prop("id");
    return Session.get(_id) || false;
};

Template.jsonObject.events({
    'click input' : function(event, template){
        Session.set($(template.find(".classOfPossibleHiddenDiv")).prop("id"), true);
    }
});