Text field filtering a list using ember + ember data

Question

I am new to using ember, but already familiar with it, mainly following some tutorials here and there and reading api docs. But the textbooks do not delve into more complex topics.

These are the details: I have already implemented a web page that shows a list of elements. The following are relevant code snippets from different parts of the application.

// 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 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 downloaded remotely via ember data (note the call to App.Item.find() in the connectOutlet route connectOutlet above) and the handle template displays it and dynamically updates the list as the data changes. It is still the main eel.

Now I want to have a text box at the top of the list, and when the user enters this text box, the list should be updated by filtering and displaying only elements with a name that matches what the user is typing. The actual definition of what a matching name is is not relevant to this issue. These may be names that contain a typed string, or that begin with it.

I know that my next step is to include a list in the handlebars template in the text view from above:

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

So my questions in this question are as follows:

• How can I refer to this text field in javascript code so that I can attach a listener to it to determine when it will change?
• And more importantly, what do I need to do inside this event listener so that the list is filtered?
• I would like to know how to achieve its filtering of data loaded locally, but also how to do it by loading filtering data remotely each time the user types.

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

Answer 1

You may have a computed property on your controller that filters 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 box to controller.search . Example: http: //www.emberplay.com#/workspace/2356272909

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