Question

我有一个简单的Ember组件设置：

<div class="instant-search">
  {{input value=filterString placeholder="Search"}}
</div>

我正在尝试设置一个简单的过滤器，因此无论您在该列表中输入什么内容，都会过滤下面模型中的列表：

  <tbody>
    {{#each model as |user| }}
      {{#link-to 'users.edit' user tagName="tr"}}
        <td>{{ current-status model=user }}</td>
        <td>{{ user.name }}</td>
        <td><em>{{ user.email }}</em></td>
      {{/link-to}}
    {{/each}}
  </tbody>

我整天都玩这个，我不能让他们互相交谈。有人可以帮忙吗？

Answer 1

对我而言，这似乎是组件中的一个简单的计算属性，看起来像这样（假设您使用Ember-CLI，因此您可以使用ES6）。

filteredModel: function() {
  let model = this.get('model');
  let filter = this.get('filterString');
  return model.filter((user) => { user.get('name').indexOf(filter) === 0; });
}.property('model', 'filterString')

此属性会在filterString或model更改后立即更新，并仅返回名称以filterString开头的用户。

然后在您的模板中，您只需绑定到filteredModel而不是model。

{{#each filteredModel as |user| }}
  ...
{{/each}}

使用EmberJS组件进行即时过滤

1 个答案: