Question

在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')
});

我必须写什么其他的余烬代码才能将数据加载到模型中，然后编写一个模板，输出用户的姓名，帐号和帐户中的交易数量？

Answer 1

我能够解决这个问题所以我会发布我的代码以防其他人帮助我。诀窍是确保JSON数据的格式与Ember想要的格式完全相同，并创建正确的路径。

据我所知，Ember期望父对象提供子对象列表。这对我来说很奇怪，所以如果有人知道如何使用外键引用父母的子对象，请告诉我。

我将/ user /：user_id JSON对象上的帐户属性更改为account_id我还在/ users中找到的用户对象中包含了account_id，并将帐户上的owned_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>

Answer 2

创建一个索引路径，使用模型为IndexController设置种子，并创建一个迭代关系的相关模板。

以下是帖子和评论之间简单的HasMany关系的示例：

var App = Ember.Application.create();
App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter.create()
});

App.Post = DS.Model.extend({
  comments: DS.hasMany('App.Comment')
});
App.Comment = DS.Model.extend({
  post: DS.belongsTo('App.Post'),
  body: DS.attr('string'),
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', App.Post.find("1"));
  }
});

HTML代码应如下所示：

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  <script type="text/x-handlebars" data-template-name="index">
  {{#each comment in content.comments}}
    {{comment.body}}
  {{/each}}
  </script>
</body>

最后但并非最不重要的是服务器响应/帖子/ 1

{
"post": {
"id": 1,
"title": "Rails is omakase",
"comments": [1, 2, 3]
},

"comments": [{
"id": 1,
"body": "But is it _lightweight_ omakase?"
},
{
"id": 2,
"body": "I for one welcome our new omakase overlords"
},
{
"id": 3,
"body": "Put me on the fast track to a delicious dinner"
}]
}

如何在一个视图中使用多个ember数据模型

2 个答案: