Question

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.

Answer 1

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.