Question

我想通过文本字段过滤模型，过滤器应该作为用户类型应用。我来自棱角分明（不是专业人士，但我设法在那里创建了这样的过滤器），所以我希望这很简单。嘿。

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

但所有答案都使用控制器。文档说＆＃34;控制器将被替换为组件＆＃34;。那么......如何以新的方式过滤模型？

-

更新

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

Ember：按文本字段过滤模型

1 个答案: