Ember CLI Array Controller not sorting through each loop

Question

I can't get sortProperties to work from an array controller. I think it's because the model that the controller needs to sort is not the model that it receives by default in Ember CLI.

The posts resource defined in router.js:

export default Router.map(function() {
  this.resource('posts', function() { 
    this.route('index', {path: '/'});
    this.route('new');
    this.route('full', {path: '/:id'});
});

The model hook is defined in routes/posts/index.js:

export default Ember.Route.extend({
  model: function() {
    return this.store.find('post');
  },
});

My model for a single post (models/post.js)

export default DS.Model.extend({
  title: DS.attr('string'),	
  category: DS.attr('string'),		
  created_at: DS.attr('date'),	
  
)}

My template displays the list of posts using an {{#each}} helper
(templates/posts/index.hbs):

The inner contents of the each helper is contained in a component named 'blog-list'.

{{#each model as |post|}}
  {{blog-list model=post}}
{{/each}}

The list of posts displays fine.

I have added code to sort the list by the title property (controllers/posts/index.js):

export default Ember.ArrayController.extend({
  sortProperties: ['title'],
  sortAscending: true,
});

I'm not sure why, but the title column is not being sorted.

Daniel Kmak Daniel Kmak · Accepted Answer · 2015-07-31T10:14:30

You have to iterate over controller instead of model in your template:

{{#each controller as |post|}}
  {{blog-list model=post}}
{{/each}}

ArrayController is deprecated, by the way.

Ember CLI Array Controller not sorting through each loop

1 Answers