javascript - Ember : filter model by text field

Question

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

列表.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

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

--

更新

我使用 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;
  })

});

计算属性用作 {{#eachfilteredArticles... 参数，并且不再需要预先设置属性(这会引发弃用警告)。

Answer 1

组件的行为在某些方面与 Controller 非常相似。您可以将它们视为旧 ember 版本中 Controller + View 的组合。他们仍在当前的 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'));
    }
})