Meteor：是否存在反应性的每个模板范围？ [英] Meteor: Is there a reactive per-template scope?

问题描述

我在同一页面上的多个（任意多个）位置呈现相同的Handlebars模板。在每个模板中，我需要一个按钮来切换div的可见性。当我用 Session.set 保存这个状态时，单击一个按钮显然会切换所有不需要的模板实例。

我可以将状态保存在模板实例（在模板中绑定到 this.data ）的数据上下文中。 myTemplate.rendered 和 Template.myTemplate.created callbacks），但是有两个问题。

1. this.data 不是被动数据源，所以不会传播给div
   
2. 我无法访问 Template.myTemplate.events 中的模板实例（详见 meteor-core ）

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

我是否错过了一些东西，或者真的没有与AngularJS的控制器相同的东西，它们通过 $ scope 为每个模板实例吗？

更新：
我正在考虑这样的事情。

template.html：

 < template name =jsonObject> 
< input type =button/> 
< div class ={{hidden}}>内容< / div> 
< / template> 
  

client.js：

  Template.jsonObject.hidden = function（）{
 var ret =; 
 if（this._hidden）{
 ret =hidden; 
} 
 return ret; 
}; 
 
 Template.jsonObject.events（{
'点击输入'：function（event，template）{
 template.data._hidden = true; 
} 
}）; 
  

解决方案

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

< blockquote>

模板实例对象表示文档中模板的出现。它可以用来访问DOM，并且可以分配属性，这些属性在模板被动更新时保留。 [b]

反应变量由 reactive-var 核心软件包：

ReactiveVar包含一个可被get和set设置的值，这样调用 set 将会失效根据反应性数据源的常规合同，任何称为的计算。 p>您的代码变为：
$ b Template.jsonObject.onCreated = function（）{
this.hidden = new ReactiveVar（false）;
};

Template.jsonObject.helpers（{
hidden：function（）{
return Template.instance（）。hidden.get（）？'hidden'：'';
}
}）;

Template.jsonObject.events（{
'点击输入'：function（event，template）{
template.hidden.set（true）;
}
}）;


HTML与您所期望的相同：

 < template name =jsonObject> 
<按钮>点击我< /按钮> 
< p>隐藏是{{隐藏}}。< / p> 
< / template> 
  




I'm rendering the same Handlebars template in multiple (arbitrarily many) locations on the same page. Inside each template, I want a button to toggle the visibility of a div. When I save this state with Session.set, clicking one button obviously toggles all the divs in all the template instantiations which is not desired.

I could save the state in the data context of the template instance (which is bound to this.data in the Template.myTemplate.rendered and Template.myTemplate.created callbacks), but there are two problems with that.

1. this.data isn't a reactive data source, so will not propagate to the div
2. I don't have access to the template instance in Template.myTemplate.events (as discussed on meteor-core)

Finally, I could somehow save it to a collection. But how would I uniquely identify the state for each template rendered? There might also be a hacky way with jQuery, but that's not the way I want to develop Meteor apps that are supposed to work with reactive templates. Especially, when that template gets more complex.

Am I missing something or is there really no equivalent to AngularJS's controllers that get passed a $scope for each template instantiation?

Update: I was thinking of something like this.

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

解决方案

All other answers are too complicated and/or outdated. As of Meteor 1.0, the recommended solution to maintaining per-template state is to use reactive variables stored in the template instance:

A template instance object represents an occurrence of a template in the document. It can be used to access the DOM and it can be assigned properties that persist as the template is reactively updated. [...] you can assign additional properties of your choice to the object.

Reactive variables are provided by the reactive-var core package:

A ReactiveVar holds a single value that can be get and set, such that calling set will invalidate any Computations that called get, according to the usual contract for reactive data sources.

Your code becomes:

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

The HTML is the same as you'd expect:

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

这篇关于Meteor：是否存在反应性的每个模板范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！