Problem

You want to display an Ember content array from an ArrayController in descending order instead of ascending order (the default).

Solution

  1. Convert the built-in content array to a normal JavaScript array, then reverse it. You use Ember’s @each property to mirror the reverse change to the content array.
  2. User the built-in sortProperties and sortAscending properties to reverse the order.

Discussion

One way to achieve that is to extend Ember.ArrayController with a new function called reverse. You will also have to create a computed property:

  1. reversedArray: function() {
  2.     return this.toArray().reverse();
  3.   }.property('myArray.@each')

Once you do that, you will be able to use reversedArray property in your Handlebars template: {{#each reversedArray}}{{/each}}.

Another way to do it is to leverage out of the box EmberJs functionality and to use sortProperties and sortAscending properties. Just specify them on your controller, like so:

  1. App.MyController = Ember.ArrayController.extend({
  2.   sortProperties: ['id'],
  3.   sortAscending: false
  4. });

And in your template you will be able to consume a reversed array, like this: {{#each arrangedContent}}{{/each}}.

Example

JS Bin