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

问题描述

我刚刚使用ember，但已经熟悉它，基本上是在这里和那里阅读api文档的一些教程。但是教程不会太复杂到更复杂的主题。

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

  //数据模型，视图和控制器
 App.Item = DS.Model.extend（{
 name：DS.attr（'string'）
}）; 
 App.ItemsController = Ember.ArrayController.extend（）; 
 App.ItemsView = Ember.View.extend（{templateName：'items'}）
 
 //在路由器的相应路由
 connectOutlets：function（router）{
 router.get（'applicationController'）。connectOutlet（'items'，App.Item.find（））
} 
 
 //在handlebars模板
< ul class =items> 
 {{#each content}} 
< li> {{name}}< / li> 
 {{/ each}} 
< / ul> 
  

此列表的数据通过ember数据远程加载（注意 App.Item.find（）调用路由的 connectOutlet 方法），一个句柄模板显示它，并动态更新列表作为数据变化。到这里，这是基本的余烬。

现在我想在列表顶部有一个文本字段，当用户键入此文本字段时，列表应该通过过滤和仅显示与用户正在键入的名称匹配的项目进行更新。匹配名称的实际定义与此问题无关。它可以是那些包含类型字符串的名称，或者是从它开始的。

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

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

所以我现在的问题如下：

• 如何在JavaScript代码中引用此文本字段，以便我可以附加一个监听器来检测何时更改？


• 更重要的是我在这个事件监听器中需要做什么，以便列表被过滤？


• 我想知道如何实现过滤本地加载的数据，而且还要如何加载我们实际上需要实现比这更复杂的东西，但知道如何做到这一点。将有帮助。

  解决方案

  您可以在控制器上具有基于文本字段过滤内容的计算属性。 >
  
  

    App.ItemsController = Ember.ArrayController.extend（{
   
   // ... 
   
   searchingContent：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

  
  
  

  为了远程过滤数据，每次搜索更改时，都应该拥有更多的垃圾邮件数据。这可以通过在每次发生变化时向路由器发送事件来完成。

  
  

  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屋！