模板具有相同subView的多个实例,具有不同的绑定属性。您可以看到这些绑定属性何时触发其观察者的事件。请注意,subViews A和D触发,但B和C永远不会触发。
{{view App.SubView identifier="A" modelDataBinding="view.person.first"}}
{{view App.SubView identifier="B" modelDataBinding="view.person.children"}}
{{view App.SubView identifier="C" modelDataBinding="view.person.children.@each.name"}}
{{view App.SubView identifier="D" modelDataBinding="view.person.children.length"}}
所以,由两部分组成的问题:
答案 0 :(得分:1)
你在这里混合了两件事:绑定与观察者不同。你不能绑定某个东西。@ each.name,你需要绑定到数组并在@each上观察。绑定是2个值之间的连接,而@each实际上并不是一个值,它是一种特殊的语法,用于告诉观察者(或计算属性依赖关系)您希望依赖于集合中每个元素的属性。 / p>
另一个问题是,如果在设置值后添加一个观察者,它将不会触发,因为该值已经设置(即没有变化)。在您的示例中,App.Person.find(1)立即返回对象而person.children执行相同操作 - 它立即返回数组,稍后将填充数据。因此,当您运行addObserver时,已经设置了子项,只有其内容将会发生更改(这就是长度观察器正确触发的原因)。
以下是一些改动的小提琴:http://jsfiddle.net/drogus/6EVty/1/(我添加了observerPath并在插入视图后设置了人物),代码:
<script type="text/x-handlebars" data-template-name="main">
{{view App.SubView identifier="A" modelDataBinding="view.person.first"}}
{{view App.SubView identifier="B" modelDataBinding="view.person.children"}}
{{view App.SubView identifier="C" modelDataBinding="view.person.children" observePath="modelData.@each.name"}}
{{view App.SubView identifier="D" modelDataBinding="view.person.children.length"}}
</script>
视图类:
SubView: Ember.View.extend({
init: function( ) {
this._super();
var observePath = this.get('observePath') || 'modelData';
this.addObserver( observePath, this, function( ) {
document.write( 'trigger ' + this.get( 'identifier' ) + ': ', this.get( 'modelData' ), '<br />');
});
}
})