ArrayController sorting supported by Ember-Data using sortProperty mixin

Question

I would like to be able to sort an ArrayController whose contents arise from an ember-data request. Unfortunately, mixing sortProperty doesn't seem to work in this case.

I would like to be able to do the following:

 App = Ember.Application.create(); App.store = DS.Store.create({ revision: 4}); App.Item = DS.Model.extend({ id: DS.attr('string'), name: DS.attr('string') }); App.store.createRecord(App.Item, {id: '4', name: 'banana' }); App.store.createRecord(App.Item, {id: '2', name: 'apple'}); App.store.createRecord(App.Item, {id: '6', name: 'spaghetti'}); App.ItemsController = Ember.ArrayController.create({ content: App.store.findAll(App.Item), sortProperties: ['name'] }); 

With the latest version of Ember and Ember-data, this gives the result:

 [ id: 4, name: banana ] [ id: 2, name: apple ] [ id: 6, name: spaghetti ] 

The problem here is that App.store.findAll() returns a RecordArray whose content property is not just an array of App.Item instances (in this case, the contents [2, 3, 4])

To access instances, I need to use something like objectAt() . But even if I extract instances of App.Item from RecordArray and dump them in a regular array, everything does not work as expected.

Am I missing an obvious way to do this, or is it just the current state of the framework? I would prefer not to replicate all my models as simple objects in order to sort them.

EDIT:

I had a problem creating my own ArrayController . However, it would be nice if everything was done as described above.

EDIT # 2:

Original steering column template:

 <script type="text/x-handlebars"> {{#each App.ItemsController.content }} <p>[ id: {{id}}, name: {{name}} ]</p> {{/each}} </script> 

(Also, I used the sortProperty property instead of sortProperties in my code above, but it was just a typo.)

And yes, if used instead

 <script type="text/x-handlebars"> {{#each App.ItemsController.arrangedContent }} <p>[ id: {{id}}, name: {{name}} ]</p> {{/each}} </script> 

Then we get exactly what we want:

 [ id: 2, name: apple ] [ id: 4, name: banana ] [ id: 6, name: spaghetti ] 

Answer 1

As in Ember 1.1.2 and ember-data 1.0.0-beta.3, and probably earlier, it’s enough to just install sortProperties on the controller. sortAscending can be set to true or false depending on which direction you want to sort.

 App.ArrayController = Ember.ArrayController.extend({ sortProperties: ['name'], sortAscending: true }) 

However, note that

 sortProperties: ['id'] 

It seems lexically, not numerically. I got around lexical sorting using the created_at timestamp, but there could be another way.

Answer 2

I had the same problem. Took me a little, but in the end this general solution solved this:

 App.ArrayController = Ember.ArrayController.extend({ sortProperties: ['id'], sortAscending: true, sortedContent: (function() { var content; content = this.get("content") || []; return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, { content: content.toArray(), sortProperties: this.get('sortProperties'), sortAscending: this.get('sortAscending') }); }).property("content.@each", 'sortProperties', 'sortAscending'), doSort: function(sortBy) { var previousSortBy; previousSortBy = this.get('sortProperties.0'); if (sortBy === previousSortBy) { return this.set('sortAscending', !this.get('sortAscending')); } else { set('sortAscending', true); return this.set('sortProperties', [sortBy]); } } }); 

Now most of my ArrayControllers extend App.ArrayController instead of Ember.ArrayController , in particular those that have Ember / Data RecordArray as content.

Now, in your steering patterns, do the following:

  {{#each item in sortedContent}} ... {{/each}} 

instead

  {{#each item in content}} ... {{/each}} 

Answer 3

I had a similar problem and sorted it with docs for an array class
in my route I used the sortBy () method. so in your case it could be something like

 App.store.findAll().sortBy('name'); 

I know this is an old question, but it answers it if someone, for example, has stumbled upon

Answer 4

In Ember version 1.0.0-rc.4, Ember.ArrayProxy.create(Ember.SortableMixin .... doesn't seem to work anymore. Using Ember.ArrayProxy.createWithMixins(Ember.SortableMixin .... or use the built-in sort functions in Ember.ArrayController.