В 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 использует представление коллекции, которое устанавливает этих наблюдателей, просто привязка к самому свойству не будет.