Ember 修改模型中的数组时模板不更新

Question

我在页面上显示了一个简单的整数数组。

这是我的模型：

var Favorite = Ember.Object.extend({
    stuff: Ember.A([1,2,3,4])
});

这是我的模板：

{{#each model.stuff as |num|}}
    <li>{{num}}</li>
{{/each}}

在我的controller中，对这个数组的修改一般会显示在页面上（比如pushObject()），但是直接修改元素不会导致页面更新。我的页面上有一个链接到此控制器操作的按钮：

actions: {
    arrayAdd() {
        this.get('model').stuff[0] = 100;
    }
}

点击按钮会修改底层数组，但不会更新页面。有没有办法让 ember 自动接受该更改？

我在 Ember 1.13

中这样做

Answer 1

在Ember中，您需要使用符合KVO（键值观察器）的方法，以便它会触发计算属性重新计算和观察器并更新模板。我们总是需要使用 get 来获取属性，并使用 set 来设置值。如果你没有遵循 ember 有时会抛出断言错误。

数组有KVO方法，相当于标准方法。

Standard Method ->  Observable Equivalent
pop ->  popObject
push -> pushObject
reverse ->  reverseObjects
shift -> shiftObject
unshift -> unshiftObject

在你的情况下，你需要像下面这样更新它，reference twiddle

arrayAdd() {
        this.get('model.stuff').unshiftObject(100);
    }

注意：可以声明数组stuff: [1,2,3,4]最好在init方法中初始化。

I still feel the array indexer should properly update the value, though

有趣的是在微光组件中，你不需要使用getters/setters。

Answer 2

实际上 ember 数组的 arr[idx] = foo 等价于 arr.replace(idx, 1, [foo]).

您可以做的另一件事是在手动编辑数组后调用 this.get('model').notifyPropertyChange('stuff')。

Ember 修改模型中的数组时模板不更新

Ember template not updating when array in model is modified

javascript

ember.js