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

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

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

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

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

1 个答案: