0

我是使用 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 远程加载的（注意上面App.Item.find()路由connectOutlet方法中的调用），一个把手模板显示它，并随着数据的变化动态更新列表。到目前为止，这是基本的余烬。

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

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

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

所以我在这一点上的问题如下：

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

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

4

1 回答 1

4

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

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 数据在每次搜索更改时加载更多项目。这可以通过在每次发生变化时向路由器发送事件来完成。

于 2012-11-15T20:37:39.540 回答