How to sort many for many via Ember.js and Ember data connection model
I have two models with a many-to-many relationship through a join model because I need to store some of the relationship attributes in an association table.
Models:
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 receive the module, I see its courses and relationship properties through the modulesCourses
following:
{{#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. Since the relationship is defined as async: true
, the courses are chosen asynchronously, so I think I should wait for all of them before trying to sort them.
This is where I am completely lost. I tried some solutions but I cannot sort them. Here's an example: http://emberjs.jsbin.com/vugeqi/4/edit
Do you have an idea? Thank!
source to share
While I expected your call sortBy
to work too, I replaced it instead with a more concise computational property that 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 a functioning JSBin here.
source to share