Model Fixtures ember loaded in templates

Question

I want to change my models in a different way.

This is how it's now:

App.Invoice = DS.Model.extend({
  title       : DS.attr('string'),
  quantity    : DS.attr('string'),
  total       : DS.attr('string')
});

App.Invoice.FIXTURES = [
 {
   id: 1,
   title: 'Invoice',
   quantity: null,
   total: null
 }
];

In my template this is how i show them

 <td>{{input value=title}}</td>
 <td>{{input value=quantity}}</td>

and

  <p>Title: {{title}}</p>
  <p>Quantity:{{quantity}}</p>

You can see here working

I want now give a different structure

App.Invoice = DS.Model.extend({
  title         : DS.attr('string'),
  transactions  : DS.hasMany('transaction')
});

App.Transaction = DS.Model.extend({
  quantity: DS.attr('string'),
  total: DS.attr('string'),
  invoice: DS.belongTo('invoice')
});

App.Invoice.FIXTURES = [
 {
   id: 1,
   title: 'Invoice'
 }
];

App.Transaction.FIXTURES = [
 {
   id:1,
   quantity: '100',
 }
];

Question is how can i show them now in my template?

Here is how i am trying with no success

Answer 1

First of all, the Ember-Data that you're using is really old, beta-2. I've updated it to the current beta, beta-11.

I've updated the FIXTURES to the current syntax and added the relation to the sample data. I removed the

App.Invoice.reopenClass({
  FIXTURES: [
     {
       id: 1,
       title: 'Invoice',
       transactions: [1]
     }
  ]
});

App.Transaction.reopenClass({
  FIXTURES: [
     {
        id: 1,
        quantity: '100'
     }
    ]
});

You need to fetch the models in your route, like this:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('invoice');
  }
});

Then you can iterate over it in the template. Don't forget your main outlet though.

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{#each model}}
    <h1>{{title}}</h1>
    {{#each transactions}}
      <p>Quantity: {{quantity}}
    {{/each}}
  {{/each}}
</script>

You can see a working example here .