Ember.js 数组属性更改不会带来所需的模板更新

Question

不要介意这段代码使用完整路径和其他东西。这些都会改变!

我有这个 Controller 代码:

App.ProductsOneController.reopenClass({
    product: {
        images: []
    }
});

然后是一个在其模板中包含此内容的 View :

{{#each image in App.ProductsOneController.product.images}}
    <li class="small-image">
        <img src="{{unbound image}}-small.png" />
    </li>
{{/each}}

我想要做的是显示根据图像数组的内容更新的图像列表。

当我做这样的事情时:

imageUrl = response.data.folder + response.data.imagedId;
tempImages = Ember.get(App.ProductsOneController, "product.images");
tempImages.unshift(imageUrl);
Ember.set(App.ProductsOneController, "product.images", tempImages);

什么也没发生。 View 未更新。

如果我离开，然后返回到相同的状态(我们这里只讨论推送状态)， View 就会更新。

我尝试从控制台更改该值。当我将其设置为 [] 时，所有图像都会根据需要消失。如果我尝试将其设置为非空数组，有时它会起作用，有时它会给我一个类型错误，提到未定义的 childView。

Answer 1

正如 @sly7_7 所指出的，您使用 Ember 的方式不正确。您需要将 srcBinding 绑定(bind)到 Controller 的实例，而不是类。

reopenClass 用于在类对象上设置函数或数据。你使用这个没有意义。为了使绑定(bind)工作，您需要与实例交互，而不是与类交互。

// We are treating App.Controller is a class
App.Controller = Ember.Controller.extend();

// We are treating App.controller as an instance
App.controller = App.Controller.create();

所以你的代码应该是这样的。

App.controller = Ember.Controller.create({ image: 'blah' });

然后

{{view App.ImageView srcBinding="App.controller.image"}}

现在，当您更改 App.controller.image 时，绑定(bind)将会更新。