![](/img/trans.png)
[英]How do you get Ember Data to recognize that the server is returning IDs for hasMany relationships?
[英]Ember Data: how do you render 'hasMany' data?
我在渲染模型的“ hasMany”部分時遇到了麻煩。 我似乎與此人有類似的問題,但我仍然不知道該怎么辦。
這是相關的JS:
App.Router.map(function() {
this.resource('account', function() {
this.resource('transaction', {
path: '/transaction/:transaction_id'
});
});
});
App.AccountIndexRoute = Ember.Route.extend({
model: function() {
return App.Account.find();
}
});
App.TransactionRoute = Ember.Route.extend({
model: function() {
return App.Transaction.find();
}
});
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.Account = DS.Model.extend({
title: DS.attr('string'),
transactions: DS.hasMany('App.Transaction')
});
App.Account.FIXTURES = [
{
id: 1,
title: 'Your account',
transactions: [1, 2, 3]
}];
App.Transaction = DS.Model.extend({
date: DS.attr('date'),
name: DS.attr('string'),
amount: DS.attr('number'),
paidWith: DS.attr('string'),
account: DS.belongsTo('App.Account')
});
App.Transaction.FIXTURES = [
{
id: 1,
date: new Date(2012, 04, 17),
name: 'Item 1',
amount: 10,
paidWith: 'credit card',
account_id: 1
},
{
id: 2,
date: new Date(2012, 04, 01),
name: 'Item 2',
amount: 50,
paidWith: 'cash',
account_id: 1
},
{
id: 3,
date: new Date(2012, 03, 28),
name: 'Item 3',
amount: 100,
paidWith: 'bank transfer',
account_id: 1
}
];
和模板:
<script type="text/x-handlebars" id="account/index">
<h2>Transactions</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{{#each model}}
{{#each transaction in transactions}}
<tr>
<td>{{date transaction.date}}</td>
<td>{{#linkTo 'transaction' this}}{{transaction.name}}{{/linkTo}}</td>
<td>£{{transaction.amount}}</td>
</tr>
{{/each}}
{{/each}}
</tbody>
</table>
</script>
有誰能提供幫助嗎?
只需進行一些更改就可以使用它。
App.Transaction.FIXTURES
每個條目都應指定一個account
屬性,而不是account_id
{{date}}
助手,否則{{date transaction.date}}
無效。 僅替換為{{transaction.date}}
{{#linkTo 'transaction' this}}
它應該是{{#linkTo 'transaction' transaction}}
-因為this
是對account.index controller
的引用 在此處發布代碼的工作副本: http : //jsfiddle.net/mgrassotti/bfwhu/2/
<script type="text/x-handlebars" id="account/index">
<h2>Transactions</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{{#each model}}
{{#each transaction in transactions}}
<tr>
<td>{{transaction.date}}</td>
<td>{{#linkTo 'transaction' transaction}}{{transaction.name}}{{/linkTo}}</td>
<td>£{{transaction.amount}}</td>
</tr>
{{/each}}
{{/each}}
</tbody>
</table>
</script>
App = Ember.Application.create({});
App.Router.map(function() {
this.resource('account', function() {
this.resource('transaction', {
path: '/transaction/:transaction_id'
});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('account');
}
});
App.AccountIndexRoute = Ember.Route.extend({
model: function() {
return App.Account.find();
}
});
App.TransactionRoute = Ember.Route.extend({
model: function() {
return App.Transaction.find();
}
});
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.Account = DS.Model.extend({
title: DS.attr('string'),
transactions: DS.hasMany('App.Transaction')
});
App.Account.FIXTURES = [
{
id: 1,
title: 'Your account',
transactions: [1, 2, 3]
}];
App.Transaction = DS.Model.extend({
date: DS.attr('date'),
name: DS.attr('string'),
amount: DS.attr('number'),
paidWith: DS.attr('string'),
account: DS.belongsTo('App.Account')
});
App.Transaction.FIXTURES = [
{
id: 1,
date: new Date(2012, 04, 17),
name: 'Item 1',
amount: 10,
paidWith: 'credit card',
account: 1
},
{
id: 2,
date: new Date(2012, 04, 01),
name: 'Item 2',
amount: 50,
paidWith: 'cash',
account: 1
},
{
id: 3,
date: new Date(2012, 03, 28),
name: 'Item 3',
amount: 100,
paidWith: 'bank transfer',
account: 1
}
];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.