缺少观察员的更新?

时间:2013-04-04 16:56:52

标签: javascript model-view-controller ember.js javascript-framework ember-data

Here's a Fiddle

模板具有相同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"}}

所以,由两部分组成的问题:

  1. B或C为什么不开火?
  2. 绑定到此Person模型的子项的正确方法是什么?

1 个答案:

答案 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 />');
        });
    }
})