How to find objects in model using a match in Ember.JS?

Question

I am starting out in Ember.JS, but I think I got myself a nice question. I have a working list of items on the left, and a search field on the right. So on the KeyUp event, I send the value of the textfield to the model , to find matches as follow:

this.controllerFor('productImages').set('model', App.ProductImage.find({ean_codes: value}));

My question is, could it be possible to find matches using some kind of RegExs, like if I have the ID 1234, it would find it even if I search only '1'?

score 4 · Accepted Answer · answered Mar 14 '13 at 20:44

According to the Ember Data docs regarding queries:

You can query the server by passing a hash to find().

The contents of the hash is opaque to Ember Data; it is up to your server to interpret it and return a list of records.

If you want client-side filtering you can use the filter() method of Ember.Array. This example displays a computed property that contains a subset of the original array contents. This computed array only shows items that match what is typed into the box.

JSBin Example

Javascript:

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', [
      Ember.Object.create({name: 'Joe'}), 
      Ember.Object.create({name: 'Frank'}), 
      Ember.Object.create({name: 'John'}),
      Ember.Object.create({name: 'Billy'}),
      Ember.Object.create({name: 'John'}),
      Ember.Object.create({name: 'Johnny'})
    ]);
  }
});

App.IndexController = Ember.ArrayController.extend({
  content: [],
  filter: "",
  filteredContent: function() {
    var filter = this.get('filter');

    return this.get('content').filter(function(item, index, enumerable){
      return item.get('name').toLowerCase().match(filter.toLowerCase());
    });
  }.property('filter', 'content.@each')

});

Handlebars:

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <span>Filter: </span>{{view Ember.TextField valueBinding=filter}}
  <ul>
  {{#each item in filteredContent}}
      <li>{{item.name}}</li>
  {{/each}}
   </ul>
</script>

This works really well.. however is there a way to debounce it so it will not be jittery when typing really fast in the filter box? — coderberry, Aug 12 '13 at 16:04

score 2 · Answer 2 · answered Mar 14 '13 at 22:23

Ember-Data's filtered-record array could be a good fit. By using store.filter instead of store.find you can return a live record-array that is filtered client side.

To filter records that have already been loaded, use:

this.controllerFor('productImages').set('model', App.ProductImage.filter(function(hash) {
  if (hash.get('id').match(/1/)) { return true; }
});

If you need to kick off a query as well, add query parameters (or an empty hash) as first parameter to the filter method:

this.controllerFor('productImages').set('model', App.ProductImage.filter({}, function(hash) {
  if (hash.get('id').match(/1/)) { return true; }
});

There are not docs/guides for this yet, so best place to learn it is via the ember-data tests. The following are a good place to start:

How to find objects in model using a match in Ember.JS?

2 Answers2