Ember.js:Trigger'；Ember.computed.filter'；在控制器中的属性更改时更新

我试图根据文本输入的输入，使用

Ember.computed.filter

过滤ArrayController的内容

App.IndexController = Ember.ArrayController.extend({
        filteredPeople: Ember.computed.filter('model',   function(person){
            var searchFilter = this.get('searchFilter');
            var regex = new RegExp(searchFilter, 'i');
            return person.firstName.match(regex);
        }),
        // this is bound to the value of a text input helper
        // I'm just pre-filling the value to show that the filtering does work
        searchFilter: 'kris' 
});

这非常有效，并按预期过滤。但是，我希望它在

searchFilter

的值更改时随时更新（即，有人键入文本输入时）。现在的问题是，只有在对模型本身进行更改或控制器首次加载时，它才会更新

当

searchFilter

更新时，是否仍要触发

Ember.computed.filter

进行更新？我正在使用

Ember.computed.filter

，因为它似乎比普通的计算属性更有效，我相信它每次都会重新创建整个数组（如果我弄错了，请告诉我）。此外，Ember.compute.filter很容易使用，而且非常干净

我用上面的设置创建了一个JSBin。当用户输入文本框时，我想以某种方式触发

Ember.computed.filter

进行自我更新

---

感谢您的时间和帮助。

我不确定您将如何使用

Ember.computed.filter

完成此操作。 使用

Ember.Array.filter

方法和计算属性将非常容易实现：

searchFilter: 'kris',

filteredPeople : function(){
    var content = this.get('content'),
        searchFilter = this.get('searchFilter'),
        regex = new RegExp(searchFilter, 'i');

    return content.filter(function(person){
        return person.get('firstName').match(regex);
    });
}.property('content.@each', 'searchFilter')

filteredPeople

现在，每当

内容

数组中的内容发生更改或

searchFilter

更改值时，都将重新计算

JSBin:
可能太容易了，但是Ember.computed.filter支持使用.property（）的依赖键，因此这将很好地工作：

App.IndexController = Ember.ArrayController.extend({
        filteredPeople: Ember.computed.filter('model',   function(person){
            var searchFilter = this.get('searchFilter');
            var regex = new RegExp(searchFilter, 'i');
            return person.firstName.match(regex);
        }).property('model','searchFilter'),
        searchFilter: 'kris' //this is bound to the value of a text input helper
});

jsbin:
我对该方法唯一关心的是，在查看Ember.Array.filter的源代码的基础上，它只是创建一个全新的数组，并将通过筛选条件的新对象推送到该数组上。因此，我认为对于较大的阵列来说，这将是低效的。我正在为一个包含100多个元素的数组实现这一点，而刷新整个DOM可能不会很好地执行。这就是为什么我尝试使用Ember.computed.filter路径，它在引擎盖下使用ArrayComputed。啊，好吧，这改变了一切。实际上，我有在DOM中渲染100多个元素的经验。我想你已经意识到了余烬在这方面的表现问题。我们实际上使用了以下解决方案：一个
pagedContent
数组，它只显示
filteredontent
数组中的x个项目量。这允许无限滚动或分页实现。一点也不容易！这正是我所希望的。我想我甚至在某个时候试过了，但一定是把语法弄错了一点。也谢谢你的JSBin。确认它能工作总是有用的（很高兴我能帮上忙。棘手的部分是，如果只添加“searchFilter”作为依赖项，它将不起作用。可能是因为它在某种程度上覆盖了computed.filter（）的第一个参数提供的所需的“model”依赖项键。但这只是一个猜测，我仍然需要了解很多关于余烬内部的知识。@BavoVanGeit整个数组应该在
searchFilter
更改后重新渲染吗？我的印象是，
Ember.computed.filer
通过在同一数组中添加/删除项来避免这种情况，但是当我检查DOM并监视jsbin中的单个
li
，它们似乎每次都会被重新渲染。我总是假设所有
li
都需要重新渲染。在模板中，使用了一个普通的each，它只注意到filteredPeople被更改，因此{{each}}被重新呈现。