2

在下面的代码中，我渲染了 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}}
4

1 回答 1

6

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

于 2012-04-27T17:12:15.390 回答