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 的关键更改，它不会被推送到模板中 - 我希望它是这样，我已经尝试了一些解决方案，但没有效果。

我还要注意，如果任何新对象带有正确的 key ，那么它们将被插入到模板中，如果它们被删除，它们也会被删除，并且模板中显示的对象中的任何值也会被更新当对象发生变化时，我知道 ArrayController 正在完成它的工作，它只是不重新过滤结果。

在不强制完全重新渲染或其他一些魔法的情况下，这是否可能？

Answer 1

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

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