ember-data-how-do-you-render-hasmany-data

The latest build of Ember.

by mgrassotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.min.js"></script>
<script src="https://raw.github.com/cmoel/tom_dale_ember_screencast/master/js/libs/ember-data.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<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>

CSS

/* Put your CSS here */
html, body { margin: 20px; }
.active { font-weight: bold; }

JavaScript

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
        }
    ];