javascript - Ember 数组更新 - 无法读取未定义的属性 'destroy'

Question

如何更新 Ember 数组，使得数组中的更改也会导致 View 中的更改？

这是一些伪代码 -

cacheArr: Em.A([]),
count: 1,
updateFxn: function() {
    this.incrementProperty(count);
    devObj = Ember.object.create();
    Ember.set(devObj,"ts", this.count);
    this.cacheArr.replace(0,1, [devObj]);
},


App.ArrayComponent = Ember.Component.extend({
  refresh: function() {
    return cacheArr;
  }.property('localModel.length')
});

<script type="text/x-handlebars" id="components/new-comp">
      {{#each item in refresh}}
         {{item.ts}}
      {{/each}}
</script>

我很困惑为什么我会收到异常 Cannot read property 'destroy' of undefined ？我一直在寻找答案，但徒劳无功。欣赏见解。

Answer 1

如果您使用正确的方法(获取/设置等)，Ember 会监视并更新它们。对于数组，您需要使用类似的 setter/getter(pushObject/removeObject/replace/objectAt 等)。

App.IndexController = Em.ArrayController.extend({
  cacheArr: Em.A([]),
  count: 1,
  actions:{
    updateFxn: function(item) {
      this.incrementProperty('count');
      var newColor = {
        color:'newColor', 
        count:this.get('count')
      };
      var index = this.indexOf(item);
      this.replace(index, 1, [newColor]);
    }
  }
});

因此，当您创建计算属性时，您通常希望它们监视可以更改计算属性结果的项目。让我们剖析以下计算属性。

refresh: function() {
  return cacheArr;
}.property('localModel.length')

让我们构建一个示例:

// let's grab refresh
var refresh = this.get('refresh');

console.log(refresh);

// let's change localModel which would make refresh dirty

this.get('localModel').pushObject({foo:'bar'});

var refresh2 = this.get('refresh');

此时，refresh 和 refresh2 将完全相同，因为计算属性始终返回 cacheArr(某些全局属性)；

http://emberjs.jsbin.com/jisegaca/1/edit