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

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

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

Demo: http://jsfiddle.net/kcmH4/ 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}}

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