Question

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

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

代码：

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

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

1 个答案: