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;
    }
}

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

我在Ember 1.13中这样做

Answer 1

实际上，余烬数组的arr[idx] = foo相当于arr.replace(idx, 1, [foo])。

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

Answer 2

在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方法中初始化它。

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

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

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

2 个答案: