sorting model data in ember with hasMany relation

1
votes

I am building table from a model property which has hasMany relation to another model. I wanted to implement sorting functionality so that when the user clicks on the column header, the underlying mode data gets sorted based on what that column is mapped to in underlying model but I couldn't get things working. I jave a jsfiddle of what I tried : http://jsfiddle.net/CMe28/4/

I have a property defined on controller like:

analyticsRunParameters: (function() {
    var sortColumn = this.get('sortColumn');
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
        sortProperties: [sortColumn],
        //sortAscending: true,
        content: this.get('content.analyticsRunParameters')
    });
}).property('content.analyticsRunParameters')

This works for initial loading, but I have no clew as to how to update the column by which I want to sort the data later. It seem like the solution out there works for arraycontroller, but my main controller is ObjectController. Please advise on what can be done to implement sorting in such case.

Thanks, Dee

2
ember.jsember-data

2 Answers

2
votes

The easiest way to do this is to use an ArrayController to control the analyticsRunParameters, and then use the built in sortProperties. By using render in your template, you get to use not only a template, but a controller, and a view if you need it.

So, instead of looping through the analyticsRunParameters in your application template you could do this:

{{render "analyticsRunParameters"}}

And then your analyticsRunParameters template contains the table and the loop.

Then you have the controller:

App.AnalyticsRunParametersController = Ember.ArrayController.extend({
    sortProperties : 'category',
    setSort : function(sort){
      this.set('sortProperties',sort);
    }
});

Here's a modification of your fiddle : http://jsfiddle.net/k3p8s/

Note that the setupController hook is used on the route to set the collection for the AnalyticsRunParametersController.

Also note that the ApplicationController : needs : ["analyticsRunParameters"].

1
votes

What you have with the ArrayProxy works fine for me, the problem is you're not telling the property to observe sortColumn. If you change your code to

analyticsRunParameters: (function() {
    var sortColumn = this.get('sortColumn');
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
        sortProperties: [sortColumn],
        //sortAscending: true,
        content: this.get('content.analyticsRunParameters')
    });
}).property('content.analyticsRunParameters', 'sortColumn')

then you should be able to update the sortColumn (either through this.set('sortColumn') or making it a value bind on an input) and have things resort.