Ember sorting hasMany relationship

2
votes

I'd like to sort a set of categories and items in ascending order (A-Z).

My HBS template iterates over an {{each}} category, and then over {{each}} item inside the category.

I've tried to pass sortProperties to each array controller, but this doesn't seem to affect anything. I also tried to extract the sorting to an array proxy (using help from here: Ember.js sorting and filtering children of a hasMany relationship in parent route)

Any ideas how to go forward from here?

Here's my JSBin so far: http://jsbin.com/momihe/8/edit

Thanks a lot!

1
javascriptsortingember.js

1 Answers

5
votes

The simplest way would be to just sort the items on the model, then iterate over them

App.Category = DS.Model.extend({
    title: DS.attr("string"),
    createdAt: DS.attr('date', { defaultValue: new Date() }),
    items: DS.hasMany('item', { async: true }),
    sortedItems: Em.computed.sort('items', function(item1, item2){    
      return item1.get('desc').localeCompare(item2.get('desc'));
    })
});

http://jsbin.com/lojep/1/edit

The next easiest is to use an item controller, and put the sorted list on there

Template

 {{#each model itemController='foo'}}
    <li><strong>{{title}}</strong>
      {{#each sortedItems}}
        <div>{{desc}}</div>
      {{/each}}
      <br>
    </li>
  {{/each}}

Controller

App.FooController = Em.ObjectController.extend({
  sortedItems: Em.computed.sort('items', function(item1, item2){    
    return item1.get('desc').localeCompare(item2.get('desc'));
  })
});

http://jsbin.com/lojep/2/edit