How to sort many to many through a join model data with Ember.js and Ember Data

Question

I have two models with a many to many relationship through a join model because I need to store some relationship attributes in the association table.

The models are:

App.Module = DS.Model.extend({
   name: DS.attr('string'),
   ...
   modulesCourses: DS.hasMany('moduleCourse', { async: true })
});

App.Course = DS.Model.extend({
    name: DS.attr('string'),
    ...
    modulesCourses: DS.hasMany('moduleCourse', { async: true })
});

App.ModuleCourse = DS.Model.extend({
    character: DS.attr('string'),
    enabled: DS.attr('boolean'),
    module: DS.belongsTo('module', { async: true }),
    course: DS.belongsTo('course', { async: true })
});

When I get a module I can see its courses and the relation properties through the modulesCourses like this:

{{#each moduleCourse in module.modulesCourses}}
    Course: {{moduleCourse.course.name}} Character: {{moduleCourse.character}}
{{/each}}

But I need to sort the courses by name before displaying them. As the relations are defined as async: true the courses are fetched asynchronously so I think I should wait to have them all before trying to sort them.

Here I'm totally lost. I have tried some solutions but I can't get them sorted. Here there is an example: http://emberjs.jsbin.com/vugeqi/4/edit

Have you got any idea? Thanks!

clekstro clekstro · Accepted Answer · 2014-11-27T14:51:42

While I would have expected your sortBy call to work as well, I've replaced it instead with a more succinct computed property, which seems to do the trick:

App.ModuleController = Ember.ObjectController.extend({
  uname: function() {
    return this.get('name').toUpperCase();
  }.property('name'),

  moduleCoursesSorting: ['course.name'],

  sortedModulesCourses: Em.computed.sort('modulesCourses', 'moduleCoursesSorting')

});

You can view the functioning JSBin here.

How to sort many to many through a join model data with Ember.js and Ember Data

1 Answers