Representing Multiple Models with ArrayController Edit Page

You can use Ember.ArrayController to represent an array of models. To tell an ArrayController which model to represent, set its model property in your route's setupController method.

You can treat an ArrayController just like its underlying array. For example, imagine we want to display the current playlist. In our router, we setup our SongsController to represent the songs in the playlist:

1
2
3
4
5

App.SongsRoute = Ember.Route.extend({
  setupController: function(controller, playlist) {
    controller.set('model', playlist.get('songs'));
  }
});

In the songs template, we can use the {{#each}} helper to display each song:

1
2
3
4
5
6
7

<h1>Playlist</h1>

<ul>
  {{#each}}
    <li>{{name}} by {{artist}}</li>
  {{/each}}
</ul>

You can use the ArrayController to collect aggregate information about the models it represents. For example, imagine we want to display the number of songs that are over 30 seconds long. We can add a new computed property called longSongCount to the controller:

1
2
3
4
5
6
7
8

App.SongsController = Ember.ArrayController.extend({
  longSongCount: function() {
    var longSongs = this.filter(function(song) {
      return song.get('duration') > 30;
    });
    return longSongs.get('length');
  }.property('@each.duration')
});

Now we can use this property in our template:

1
2
3
4
5
6
7

<ul>
  {{#each}}
    <li>{{name}} by {{artist}}</li>
  {{/each}}
</ul>

{{longSongCount}} songs over 30 seconds.

Sorting

The Ember.ArrayController uses the Ember.SortableMixin to allow sorting of content. There are two properties that can be set in order to set up sorting:

1
2
3
4

App.SongsController = Ember.ArrayController.extend({
  sortProperties: ['name', 'artist'],
  sortAscending: true // false for descending
});