修改模型中的数组时，余烬模板不更新

Question

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

这是我的模型：

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

这是我的模板：

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

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

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

单击该按钮会修改基础数组，但不更新页面。 有没有办法让余烬自动接受这种变化？

我在余烬 1.13 中这样做

Answer 1

实际上，余烬数组的arr[idx] = foo等效物是arr.replace(idx, 1, [foo])。

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

Answer 2

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

对于阵列，有等效于标准方法的 KVO 方法。

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

在您的情况下，您需要像下面这样更新它，参考 twiddle

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

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

我仍然觉得数组索引器应该正确更新值， 虽然

有趣的是，在微光组件中，您不需要使用 getter/setter。