Representing Multiple Models with ArrayController

You can use Ember.ArrayController to represent an array of models. To tell an ArrayController which models 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 route, we setup our SongsController to represent the songs in the playlist:

export default 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:

<h1>Playlist</h1>

<ul>
  {{#each model as |song|}}
    <li>{{song.name}} by {{song.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:

export default 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:

<ul>
  {{#each model as |song|}}
    <li>{{song.name}} by {{song.artist}}</li>
  {{/each}}
</ul>

{{longSongCount}} songs over 30 seconds.

Sorting

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

Item Controller

export default Ember.Controller.extend({

  name: Ember.computed.alias('model.name'),
  artist: Ember.computed.alias('model.artist'),

  fullName: function() {
    return this.get('name') + ' by ' + this.get('artist');
  }.property('name', 'artist')
});

export default Ember.ArrayController.extend({
  itemController: 'song'
});

{{#each controller as |item|}}
  <li>{{item.fullName}}</li>
{{/each}}

export default Ember.ArrayController.extend({
});

{{#each controller itemController="song" as |item|}}
  <li>{{item.fullName}}</li>
{{/each}}