Question

我在保持我的Array与模板完全同步时遇到了一些问题，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')
});

Answer 2

为避免重新计算阵列并提高性能，请使用Ember.arrayComputed。以下是如何在案例中使用它：

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

对象更改时重新过滤ArrayController

2 个答案: