在 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 使用一个集合视图来设置这些观察者，只是绑定到属性本身不会。