使用 ember + ember 数据过滤列表的文本字段 [英] text field filtering a list using ember + ember data

问题描述

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

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

//数据模型、视图和控制器App.Item = DS.Model.extend({名称:DS.attr('string')});App.ItemsController = Ember.ArrayController.extend();App.ItemsView = Ember.View.extend({ templateName: 'items' })//在路由器对应的路由中连接插座:功能(路由器){router.get('applicationController').connectOutlet('items', App.Item.find())}//在车把模板中<ul class="items">{{#每个内容}}<li>{{name}}</li>{{/每个}}

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

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

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

{{查看 Ember.TextField}}
<ul class="items">{{#每个内容}}<li>{{name}}</li>{{/每个}}

所以我现在的问题如下:

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

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

解决方案

您可以在控制器上设置一个计算属性，用于根据文本字段过滤内容.

App.ItemsController = Ember.ArrayController.extend({//...搜索内容:函数(){var regexp = new RegExp(this.get('search'));返回 this.get('content').filter(function(item) {返回 regexp.test(item.get('name'));});}.property('搜索', '[e-mail]')});

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

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

I'm new at using ember, but already familiar with it, basically following some tutorials here and there and reading the api docs. But tutorials don't go too deep into more complex topics.

These are the details: I already implemented a web page that shows a list of items. The following are the relevant code excerpts from different parts of the app.

// 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>

The data for this list is loaded remotely via ember-data (notice the App.Item.find() call in the route's connectOutlet method above) and a handlebar template displays it, and dynamically updates the list as the data changes. Up to here this is basic ember.

Now I want to have a text field at the top of the list, and when the user types in this text field, the list should be updated, by filtering and showing only the items with a name that matches what the user is typing. The actual definition of what a matching name is, is irrelevant to this question. It could be those names that contain the typed string, or that start with it.

I know my next step is to include a textfield view on top of the list in the handlebars template:

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

So my questions at this point are the following:

• How do I refer to this text field in javascript code so I can attach a listener to it to detect when it changes?
• And more importantly, what do I need to do inside this event listener so the list gets filtered?
• I would like to know how to achieve it filtering data loaded locally, but also how to do it by loading the filtering data remotely everytime the user types.

I actually need to implement something slightly more complex than this, but knowing how to do this will help.

解决方案

You can have a computed property on your controller that filters the content based on a text field.

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', '[e-mail]')
});

Then you just bind your text field to controller.search. Example: http://www.emberplay.com#/workspace/2356272909

To filter data remotely you should have ember data load more items every time search changes. This can be done by sending an event to the router every time there is a change.

这篇关于使用 ember + ember 数据过滤列表的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！