使用 ember + ember 数据过滤列表的文本字段

Question

我是使用 ember 的新手，但对它已经很熟悉了，基本上是在这里和那里学习一些教程并阅读 api 文档。但教程不会深入到更复杂的主题。

这些是详细信息：我已经实现了一个显示项目列表的网页。以下是应用不同部分的相关代码摘录。

// the data model, the view and the controller
App.Item = DS.Model.extend({
    name: DS.attr('string')
});
App.ItemsController = Ember.ArrayController.extend();
App.ItemsView = Ember.View.extend({ templateName: 'items' })

// in the router's corresponding route
connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('items', App.Item.find())
}

// in the handlebars template
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

此列表的数据通过 ember-data 远程加载（请注意上面路由的 connectOutlet 方法中的 App.Item.find() 调用），并且车把模板显示它，并随着数据的变化动态更新列表。到目前为止，这是基本的余烬。

现在我想在列表顶部有一个文本字段，当用户在此文本字段中键入时，应该通过过滤并仅显示名称与用户名称匹配的项目来更新列表打字。匹配名称的实际定义与这个问题无关。它可能是那些包含输入字符串的名称，或者以它开头的名称。

我知道我的下一步是在车把模板的列表顶部包含一个文本字段视图：

<div class="search-bar">
    {{view Ember.TextField}}
</div>
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

所以我现在的问题如下：

• 如何在 javascript 代码中引用此文本字段，以便我可以将侦听器附加到它以检测它何时发生变化？
• 更重要的是，我需要在此事件侦听器中执行什么操作才能过滤列表？
• 我想知道如何实现它过滤本地加载的数据，以及如何通过每次用户键入时远程加载过滤数据来实现。

我实际上需要实现比这稍微复杂一些的东西，但是知道如何去做会有所帮助。

Answer 1

您可以在控制器上使用计算属性，根据文本字段过滤内容。

App.ItemsController = Ember.ArrayController.extend({

  // ...

  searchedContent: function() {
    var regexp = new RegExp(this.get('search'));

    return this.get('content').filter(function(item) {
      return regexp.test(item.get('name'));
    });

  }.property('search', 'content.@each.name')
});

然后您只需将您的文本字段绑定到controller.search。示例：http://www.emberplay.com#/workspace/2356272909

要远程过滤数据，您应该让 ember 数据在每次搜索更改时加载更多项目。这可以通过在每次发生变化时向路由器发送一个事件来完成。