发布于 2015-08-18 16:29:53 | 302 次阅读 | 评论: 0 | 来源: 网络整理
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}}
|