在RESTful服务器上给定这些JSON数据模型
/用户
{"users":[
{"id":"1","first_name":"John","last_name":"Doe"},
{"id":"2","first_name":"Donald","last_name":"Duck"}
]}
/用户/ 1
{"user":
{"id":"1","first_name":"John","last_name":"Doe","account":"1"}
}
/帐户
{"accounts":[
{"id":"1","owned_by":"1"},{"id":"2","owned_by":"2"}
]}
/帐户/ 1
{"account":
{"id":"1","owned_by":"1","transactions":[1,17]}
}
和这些Ember数据模型
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.RESTAdapter.create({
url: 'http://api.mydomain.ca'
})
});
App.User = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
account: DS.belongsTo('App.Account')
});
App.Account = DS.Model.extend({
ownedBy: DS.belongsTo('App.User'),
transactions: DS.hasMany('App.Transaction')
});
为了将数据加载到模型中，然后编写一个模板来输出用户名，帐户ID和帐户中的交易数量，我还需要编写其他哪些 Ember 代码？
最佳答案
我能够解决此问题，因此我将发布我的代码，以防它对其他人有所帮助。诀窍是确保JSON数据的格式完全符合Ember的要求，并创建正确的路由。
据我所知，Ember希望父对象提供子对象的列表。这让我感到很奇怪，因此如果有人知道用子对象用外键引用其 parent 的方式，请告诉我。
我将我的/ user /:user_id JSON对象上的account属性更改为account_id，还在/ users上找到的用户对象上包含了account_id，并将该帐户上的owner_by属性更改为user_id。
我的JavaScript文件
var App = Ember.Application.create();
// Router
App.Router.map(function() {
this.resource('users', function() {
this.resource('user', {path:':user_id'});
}); // '/#/users/:user_id'
this.resource('accounts', function() {
this.resource('account', {path:':account_id'});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('users');
}
});
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.AccountsRoute = Ember.Route.extend({
model: function() {
return App.Account.find();
}
});
// Controllers
App.TransactionsController = Ember.ArrayController.extend();
// Adapter
App.Adapter = DS.RESTAdapter.extend({
url: 'http://api.mydomain.ca'
});
// Models
App.Store = DS.Store.extend({
revision: 11,
adapter: App.Adapter.create({})
});
App.User = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
account: DS.belongsTo('App.Account')
});
App.Account = DS.Model.extend({
user: DS.belongsTo('App.User'),
transactions: DS.hasMany('App.Transaction'),
balance: function() {
return this.get('transactions').getEach('amount').reduce(function(accum, item) {
return accum + item;
}, 0);
}.property('transactions.@each.amount')
});
App.Transaction = DS.Model.extend({
account: DS.belongsTo('App.Account'),
amount: DS.attr('number'),
description: DS.attr('string'),
timestamp: DS.attr('date')
});
还有车把模板
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="twelve columns">
<h2>Accounts</h2>
<p>{{outlet}}</p>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="users">
<div class="row">
<div class="three columns" id="users">
{{#each user in controller }}
{{#linkTo "user" user class="panel twelve columns"}}{{user.firstName}} {{user.lastName}}{{/linkTo}}
{{/each}}
</div>
<div class="nine columns" id="user">
{{ outlet }}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="user">
<h2>{{firstName}} {{lastName}}</h2>
{{#if account}}
{{render "account" account}}
{{else}}
Error: Account not set up!
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="accounts">
<div class="row">
<div class="three columns" id="accounts">
{{#each account in controller }}
{{#linkTo "account" account class="panel twelve columns"}}{{account.id}} {{account.user.firstName}} {{account.user.lastName}}{{/linkTo}}
{{/each}}
</div>
<div class="nine columns" id="account">
{{ outlet }}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="account">
<p>Account Number: {{id}}, Balance: {{balance}}, {{transactions.length}} transactions</p>
{{render "transactions" transactions}}
</script>
<script type="text/x-handlebars" data-template-name="transactions">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Amount</th>
<th>Timestamp</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each transaction in controller}}
<tr>
<td>{{transaction.id}}</td>
<td>{{transaction.amount}}</td>
<td>{{transaction.timestamp}}</td>
<td>{{transaction.description}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>