Emberjs V1.0.0-pre.4設置無法呈現模板與數據setupController
把手1.0.0.rc.2
我建立一個Facebook好友列表管理的餘燼。當我導航到list/1/members
時,MembersRoute用MembersController填充的數據沒有出現。
MembersRoute將呈現朋友模板,通常顯示我們所有的朋友,但在這種情況下只有選定列表的成員。
應用程序的路由器
App.Router.map(function() {
this.route('instructions');
this.route('friends');
this.route('members', {path: '/list/:list_id/members'});
});
路線
App.MembersRoute = Ember.Route.extend({
model: function() {
var list = this.controllerFor('application').get('selectedList'),
friends = list && list.get('members') || [];
return friends;
},
setupController: function (controller, model) {
var list = this.controllerFor('application').get('selectedList');
controller.set('title', list.get('title'));
controller.set('list', list);
controller.set('content', model);
},
renderTemplate: function() {
this.render('friends');
}
});
的朋友模板
<script type='text/x-handlebars' data-template-name='friends'>
<h2>{{title}}</h2>
<ul id='friends'>
{{#each friend in controller}}
<a href='#' {{action 'select' friend}}>
<li {{bindAttr class='friend.isSelected:selected'}}>
<img {{bindAttr src='friend.imageUrl'}}/>
<p>{{friend.name}}</p>
</li>
</a>
{{else}}
<h3>There are no friends in this list.</h3>
{{/each}}
</ul>
</script>
應用程序模板
<script type='text/x-handlebars' data-template-name='application'>
<div class='row'>
<div class='span4'>
{{render 'lists'}}
</div>
<div class='span8>
{{outlet}}
</div>
</div>
</script>
最後,數據存儲和模式
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.List = DS.Model.extend({
members: DS.hasMany('App.Friend'),
name: DS.attr('string'),
isSelected: DS.attr('boolean'),
num_of_members: function() {
var num = this.get('members').toArray().length,
str = num + ' Member';
return num === 1 ? str : str + 's';
}.property('members'),
title: function() {
return 'Friends in ' + this.get('name');
}.property('name'),
toggleSelected: function() {
this.set('isSelected', !this.get('isSelected'));
return this;
}
});
App.Friend = DS.Model.extend({
lists: DS.hasMany('App.List'),
name: DS.attr('string'),
imageUrl: DS.attr('string'),
isSelected: DS.attr('boolean'),
toggleSelected: function() {
this.set('isSelected', !this.get('isSelected'));
return this;
}
});