CODEWITHSUNDEEP
ember.jsfilteringember-data
Ernesto
Ernesto

Reputation: 4017

text field filtering a list using ember + ember data

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:

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

Upvotes: 0

Views: 2831

Answers (1)

Ryan
Ryan

Reputation: 3594

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', '[email protected]')
});

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.

Upvotes: 4

Related Questions