Ember：按文本字段过滤模型

Question

我想通过文本字段过滤模型，过滤器应该在用户输入时应用。我来自 angular（不是专业人士，但我设法在那里创建了这样的过滤器），所以我希望这很容易。呵呵。

list.hbs：

{{input type='text' placeholder='Filter' size='50' valueBinding='searchKeyword'}}

<ol>
  {{#each model.articles as |article|}}
    <li>{{{article.title}}</li>
  {{/each}}
</ol>

我知道这个问题被问了很多，我做了很多研究，然后才决定搜索量不适合这样的问题，并且我不了解 ember 的一些核心思想。似乎随着从 1.x 到 2.x 的转换，大多数示例、问题和指南都是无效的。我的问题已经被问过多次了：

EmberJS filter array of items as the user types

text field filtering a list using ember + ember data

Emberjs - Connecting an {{ input }} filter bar with my list of Objects. As I type, the list filters

但所有答案都使用控制器。文档说“控制器将被组件取代”。那么...如何以新的方式过滤模型？

--

更新

我使用 Remi 的示例创建了这个组件：

export default Ember.Component.extend({

  filteredArticles: Ember.computed('articles', 'filter', function() {
    var keyword = this.get('filter');
    var filtered = this.get('articles');
    if (keyword) {
      keyword = keyword.toLowerCase().trim();
      filtered = this.get('articles').filter((item) => item.get('title').toLowerCase().includes(keyword));
    }
    return filtered;
  })

});

计算属性用作{{#each filteredArticles... 参数，不再需要预先设置属性（这会引发弃用警告）。

Answer 1

在某些方面，组件的行为与控制器非常相似。您可以将它们视为旧 ember 版本中的控制器+视图的组合。他们仍然在当前的余烬中工作。但是如果你想通过组件来解决你的问题，我建议如下：

别说，你有一个 /templates/components/list.hbs：

{{input type='text' placeholder='Filter' size='50' valueBinding='searchKeyword'}}

<ol>
  {{#each filteredArticles as |article|}}
    <li>{{{article.title}}</li>
  {{/each}}
</ol>

在您应该使用组件的模板之一中，例如/templates/my-list.hbs：

{{list articles=model.articles}}

然后为使您的组件正常工作，添加 /components/list.js：

Ember.Component.extend({
    searchKeyword: null,
    articles: null,
    filteredArticles: null,
    updateList: Ember.computed('searchKeyword', function(){
        var keyword = this.get('searchKeyword');

        var filtered = this.get('articles').filterBy('title', searchKeyword);
        this.set('filteredArticles', filtered);     
    }),
    didInsertElement(){
       this.set('filteredArticles', this.get('articles'));
    }
})