簡體   English   中英

灰燼數據:如何呈現“有很多”數據?

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM