目前,我将遍历《 Ember.js指南》中的每个页面和代码片段,并构建一个小型示例应用程序。我有些卡住了,但是解决了。然而,这使我迷惑不解。
在http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/
它也在这里,但不使用.get('songs“)http://emberjs.com/guides/controllers/representing-a-single-model-with-objectcontroller/
App.SongsRoute = Ember.Route.extend({
setupController: function(controller, playlist) {
controller.set('model', playlist.get('songs'));
}
});
我不知道playlist.get('songs')在引用什么。我认为这是一个模型对象数组内部对象,但显然我错了。但是由于他们站点上的示例代码没有可用于工作的模拟存根数据,因此我只是从所有测试中进行猜测。
此处提供的代码已注释掉一些位,以查看我正在测试的内容。
<script type="text/x-handlebars" data-template-name="songs">
<h1>Playlist</h1>
<ul>
{{#each}}
<li>{{name}} by {{artist}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="playlist">
<h3>Playlist: </h3>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.Router.map(function () {
this.resource('songs');
this.resource('playlist');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('songs');
}
});
// App.SongsRoute = Ember.Route.extend({
// setupController: function(controller, model) {
// controller.set('model', model);
// },
// model: function () {
// // return songs;
// return playlist.songs;
// }
// });
App.SongsRoute = Ember.Route.extend({
playlist: function() {
var playlist = { songs: [{fish: "fish"}, {fish: "fish"}] };
return playlist;
}.property(),
setupController: function(controller, playlist) {
controller.set('model', playlist.get('songs'));
}
});
App.PlaylistRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('model', model);
},
model: function () {
return playlist;
}
});
App.SongsController = Ember.ArrayController.extend();
var songs = {
duration: 777,
name: 'Ember',
artist: 'Jimmy Smith',
};
var playlist = {
songs: [
{
id: 1,
duration: 777,
name: 'Ember',
artist: 'Jimmy Smith',
},
{
id: 2,
duration: 888,
name: 'jQuery',
artist: 'Hyper Cat',
}
]
};
</script>
最佳答案
不幸的是,此链接(http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/)有点令人困惑。他们假设存在模型关系,但没有显示。
他们假设有这样的事情:
App.Playlist = DS.Model.extend({
name : DS.attr('string'),
songs : DS.hasMany('song',{async:true})
});
App.Song = DS.Model.extend({
name : DS.attr('string')
});
然后通常,您要做的是从
model
中的setupController
中提取集合,然后在已由主 Controller 进行content
的嵌套 Controller 上将其设置为need
。App.PlaylistRoute = Ember.Route.extend({
setupController : function(controller,model){
this._super(controller,model);
this.controllerFor('songs').set('content',model.get('songs'));
}
});
App.PlaylistController = Ember.ObjectController.extend({
needs : ['songs']
});
然后,由于将
ArrayController
用于集合,因此,如果定义sortProperties
和sortAscending
属性,则可以建立排序。App.SongsController = Ember.ArrayController.extend({
sortProperties : ['name'],
sortAscending : true
});
这是一个JSBin,它使用
FixtureAdapter
展示了总体思路。http://jsbin.com/ucanam/1073/edit