javascript - 对象更改时重新过滤 ArrayController

Question

我在保持我的数组与模板完全同步时遇到了一些问题，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 正在执行它的工作，只是没有重新过滤结果。

如果不强制完全重新渲染或其他一些魔法，这是否可能？

Answer 1

我会使用 filterBy 计算属性宏，有点像这样:

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