在Ember.js中为什么绑定到数组不能在{{#each}}之外工作？

Question

在下面的代码中,我渲染了3个视图.第二个和第三个视图呈现App.controller.a.单击第一个视图会发生变化App.controller.a.单击时,第三个视图会更新其内容.第二个视图不会更新其内容.为什么？

我假设第二个视图绑定到数组App.controller.a.看起来绑定没有更新.

演示:http://jsfiddle.net/kcmH4/

代码:

App = Ember.Application.create({});
App.controller = Ember.Object.create({
    a: Ember.A([1]),
    my_method: function() {
        var a = this.get('a');
        $.each([2], function(i, element) {
            a.pushObject(element);
        });
    }
});
App.MyView = Ember.View.extend({
    click: function() {
        this.get('content').my_method();
    }
});

模板:

{{#view App.MyView contentBinding="App.controller"}}
    First view: Click me
{{/view}}
{{#view Ember.View contentBinding="App.controller"}}
    2nd view: {{content.a}}
{{/view}}
{{#view Ember.View contentBinding="App.controller"}}
    Third view:
    <ul>
    {{#each content.a}}
        <li>{{this}}</li>
    {{/each}}
    </ul>
{{/view}}

Answer 1

您将第二个视图绑定到一个数组,但是您没有在设置数组观察器的帮助器/视图中执行此操作.因此,该观点并未被告知该房产正在发生变化,因为它并未发生变化.数组是变异的,但属性本身并没有改变.数组和对象在JS中通过引用传递,因此即使您正在修改数组的内容,除非您正在观察对数组内容的更改,否则您将不会收到任何差异的通知.#each使用一个集合视图来设置那些观察者,只是绑定到属性本身不会.