代表多模型 编辑页面

英文原文：http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/

Ember.ArrayController用于代表一组模型。通过在路由的setupController方法中设置ArrayController的model属性，来指定其代表的模型。

可以将ArrayController作为一个数组来对待。例如，音乐播放器希望显示当前播放列表。在路由中，通过设置SongsController来代表播放列表中的歌曲。

1
2
3
4
5

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

在songs模板中，可以使用{{#each}}助手来显示歌曲。

1
2
3
4
5
6
7

<h1>Playlist</h1>

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

另外，可以使用ArrayController来收集一些模型所代表的聚合类信息。例如，音乐播放器需要显示超过30秒长的歌曲的数量。那么只需要在控制器中添加一个名为longSongCount的计算属性。

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')
});

现在便可以在模板中使用该属性。

1
2
3
4
5
6
7

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

{{longSongCount}} songs over 30 seconds.

排序

Ember.ArrayController使用Ember.SortableMixin来支持排序。为了支持排序，需要设置两个属性：

1
2
3
4

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

条目控制器

在遍历ArrayController的条目时，指定一个控制器来装饰单个条目非常有用。这可以在ArrayController中进行定义：

1
2
3

App.SongsController = Ember.ArrayController.extend({
  itemController: 'song'
});

或者在模板中指定：

1
2
3

{{#each itemController="song"}}
  <li>{{name}} by {{artist}}</li>
{{/each}}