Javascript 对象更改时正在重新筛选的ArrayController

我在保持数组与模板完全同步时遇到了一点问题，ArrayController正在监视正在推送、删除和更新的对象。但是，ArrayController正在过滤结果，当其中一个对象发生更改并且其新属性可能最终将其排除在过滤器之外时，它实际上不会被删除

请参阅下面的代码，为了简化内容，内容被设置为一个对象数组，但在我的应用程序中，它实际上是

Ember.A（[Ember.Object，Ember.Object]）

等等，底层数组是可变的，它随对象不断变化

App.TabController = Ember.ArrayController.extend({
    content: [
        {id: 1, key: 'unique'},
        {id: 2, key: 'unique'},
        {id: 3, key: 'non-unique'},
    ],

    filteredContent: function() {
        var content = this.get('content');

        return this.filter(function(item, idx, en) {
            return (item.key == 'unique');
        });
    }.observes('content.length').property('content'),
});

上面的代码完全可以将第三个对象排除在模板之外，因为它的键与

unique

的值不匹配。但是，如果id等于3的对象得到更新，并且它的关键更改为

unique

，则它没有被推送到模板中-我希望它是这样，我尝试了一些解决方案，但没有效果

我还要注意，如果任何新对象带有正确的键，那么它们将插入模板中，如果它们被删除，它们也将被删除，并且当对象更改时，模板中显示的对象中的任何值都会更新，因此我知道

ArrayController

正在执行它的任务，只是没有重新过滤结果

---

在不强制完全重新渲染或其他巫术的情况下，这可能吗？

我会使用filterBy computed属性宏，有点像这样：

App.TabController = Ember.ArrayController.extend({
  filteredContent: Ember.computed.filterBy('content', 'key', 'unique')
});

---

为了避免重新计算数组并提高性能，请使用。以下是如何将其用于您的案例：

App.TabController = Ember.ArrayController.extend({
  filteredContent: Ember.arrayComputed("content.[]", {
    initialValue: [],
    addedItem: function(accum, item) {
      if (item.key == 'unique') {
        accum.pushObject(item);
      }
      return accum;
    },
    removedItem: function(accum, item) {
      accum.removeObject(item);
      return accum;
    }
  })
});

---

当数组元素发生变化时（比如屏幕上显示的属性发生变化时），它会工作并更新数组元素吗？或者这只是处理添加和删除？@rickibalboa单个项目的所有绑定都可以正常工作。这是一种性能优化，可以避免在内容数组中添加/删除项目时重新评估数组。谢谢，我已经实现了此解决方案，因此我接受您的回答。作为记录，

Ember.computed.filterBy

在封面下使用arrayComputed，因此，当添加或删除新值时，它不会迭代整个数组。它只是一个比自己完成所有逻辑要好得多的API。