ContributorsLast modified on: Mar 25, 2016
farhan687
Edit this page on Github

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:

reversedArray: function() {
    return this.toArray().reverse();
  }.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:

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

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

Example

Previous Next