Ember数据:你如何渲染'hasMany'数据?

时间:2013-04-15 21:27:46

标签: ember.js ember-data

我无法渲染模型中的'hasMany'部分。我似乎遇到了与this guy类似的问题,但我仍然无法弄清楚要做什么。

以下是相关的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>&pound;{{transaction.amount}}</td>
          </tr>
        {{/each}}
    {{/each}}
    </tbody>
</table>
</script>

有人能够提供帮助吗?

1 个答案:

答案 0 :(得分:5)

只需进行一些更改就可以了。

  • 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>&pound;{{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
        }
    ];