在访问关联的DS.model到DS.model array.firstObject
时,似乎存在绑定问题。所以下面小提琴中的路径是App.person.parties.firstObject
,但它似乎没有正确绑定。 App.person.parties
绑定正常,可以在插座中使用,但firstObject
似乎无法正常工作。有什么想法吗?
此外,我认为这不是nextParty
的最佳方法 - 如果有人可以就如何构建这一点提供一些建议,那将非常感激!
JS: -
/* Flip this switch to compare. You should see 'Ember party' appear after 2s when it works */
var works = true;
window.App = Em.Application.create({
ready: function() {
App.set('person', App.store.find(App.Person, 1));
},
ApplicationView: Em.View.extend({templateName: 'application'}),
ApplicationController: Em.Controller.extend(),
Router: Em.Router.extend({
root: Em.Route.extend({
index: Em.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('dashboard', App.get('person'));
router.get('dashboardController').connectOutlet('nextParty', 'party',
App.get('person.nextParty')
);
}
})
})
}),
DashboardController: Em.Controller.extend({}),
DashboardView: Em.View.extend({
templateName: 'dashboard'
}),
PartyController: Em.Controller.extend({}),
PartyView: Em.View.extend({
templateName: 'party'
}),
Party: DS.Model.extend({
name: DS.attr('string')
}),
Person: DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
parties: DS.hasMany('App.Party'),
nextParty: function() { return this.get('parties.firstObject'); }.property('parties.firstObject')
}),
store: DS.Store.create({
revision: 7,
adapter: DS.Adapter.create({
find: function(store, type, id) {
if (type == 'App.Person') {
if (works) {
store.load(type, id, {
id: 1,
firstName: 'John',
lastName: 'Jackson',
parties: [99]
});
} else {
setTimeout(function() {
store.load(type, id, {
id: 1,
firstName: 'John',
lastName: 'Jackson',
parties: [99]
});
}, 1000);
}
}
if (type == 'App.Party') {
setTimeout(function() {
store.load(type, id, {
id: 99,
name: 'Ember party'
});
}, 2000);
}
}
})
})
});
模板: -
<script type="text/x-handlebars" data-template-name="application">
<h1>Party app</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="dashboard">
<h2>Hi {{content.firstName}} {{content.lastName}}</h2>
<h3>Next party</h3>
{{outlet nextParty}}
</script>
<script type="text/x-handlebars" data-template-name="party">
{{content.name}}
</script>
答案 0 :(得分:0)
firstObject
和lastObject
属性不可绑定。您可以通过创建计算属性来绕过它:
myFirstObject: function() {
return this.get('content.firstObject');
}.property('content.[]')
请参阅here。