Question

我有以下代码来过滤我的一个控制器上的内容。模板循环计算属性，并显示项目。然后我有一个文本输入过滤内容。一切正常，除非有大量元素，过滤变慢。我已经在其他地方读过一个帖子，汤姆戴尔的答案试图解释它，但是这个例子正在返回404.

为了加快速度，我该去哪儿？

以下是代码：

控制器：

App.PlaylistIndexController = Ember.ObjectController.extend({
    filterString: null,
    filteredSongs: function() {
        var filter = this.get('filterString');
        if(filter == undefined) return this.get('content.songs');
        filter = filter.toLowerCase();
        return this.get('content.songs').filter(function(item, index, enumerable){
            if(item.get('artist').toLowerCase().match(filter.toLowerCase()) || item.get('name').toLowerCase().match(filter.toLowerCase()))
                return item;
        });
    }.property('content.songs', 'filterString')
});

模板：

{{#each song in controller.filteredSongs}}
  {{song}}{{!-- some song stuff--}}
{{/each}}

过滤输入：

{{input valueBinding='filterString' placeholder='Search for songs within playlist'}}

Answer 1

你可以试试这个：

JSBIN Using Ember.run.later

onInputFilterChanged: function(){
      this.set('canProceedFiltering', false);
      Ember.run.later(this, function(){
         this.set('filterString', this.get('inputFilterString'));
         this.set('canProceedFiltering', true);
      },500);
}.observes('inputFilterString')

这样，用户可以键入文本过滤器，只有在用户键入更具体的条件后才会触发搜索。缺点是单字符搜索会花费半秒钟。

加快缓慢的Ember内容过滤器

1 个答案: