Add and push additional objects on the fly with Ember

Ember Data
1

I am trying to add and push additional objects in my application, i have reproduced the case in this jsBin

To Achieve that i have followed this tutorial, which does exactly what i want.

I have a list of invoices and any invoice is composed by transactions, i can create a new invoice in my invoices create route where i want to add and push any single transaction

 actions: {
    add: function() {
      var newTransaction = Ember.Object.create({
        name: "New Transaction",
        quantity: null,
        selectedFare: null,
        isDone: false
      });

      return this.get("content").pushObject(newTransaction);
    }

In my template this is how it looks

<tr>
{{#each controller}}
  <td>{{name}} {{input type=checkbox value=isDone checked=isDone}} {{input valueBinding=quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
{{/each}}
</tr>

Unfortunately i can not really see the error in the console , i don’t know what is going wrong

If from the template you remove{{#each controller}}{{/each}}, you can see one single transaction.

What’s wrong in my code? Any help in the jsbin created would be great

2

To make {{#each controller}} work your controller needs to extend Ember.ArrayController.

But I would suggest avoiding that anyway, because it is confusing (as you discovered!) and the recommendation going forward toward Ember 2.0 is to (1) prefer Ember.Controller over Ember.ArrayController or Ember.ObjectController and (2) use the explicit form of each, like:

{{#each invoice in model}}
    <td>{{invoice.name}} ...
{{/each}}
3

Still not achieving it, i have tried to do these changes

{{#each controller}}

to

 {{#each transaction in controller.transactions}}

in the template

    <tr>
   {{#each transaction in controller.transactions}}
      <td>{{transaction.name}} {{input type=checkbox value=transaction.isDone checked=transaction.isDone}} {{input valueBinding=transaction.quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
    {{/each}}
    </tr>

and then as the single invoice model that holds the transactions in its transactions in my action add

i changed this

return this.get("content").pushObject(newTransaction);

to

return this.get("content.transactions").pushObject(newTransaction);

It seems more correct but still not achieving.

My new jsbin

4

Look at my post again. I said: {{#each invoice in model}}. You don’t have anything named controller.transactions.

5

Thanks i have understood what you said, but unfortunately I did not get it working, if you can show me better in this jsbin would be be better so I can have the confirmation it is right way

6

You’re trying to iterate over a list of models in your invoice/edit template, but the model is not a list, it’s a single record.

7

Achieved

add: function() {

  var transactionRecord = this.store.createRecord('transaction', {
    name: 'new transaction'
  });

  return this.get("model.transactions").addObject(transactionRecord);
}

the template

<script type="text/x-handlebars" data-template-name="invoice/index">
  <p> Invoice Index Route</p>
  <p> {{title}} </p>
  <p> Transactions: </p>
    {{#each model.transactions}}
      <ul>
        <li> name: {{name}} </li>
        <li> quantity: {{quantity}} </li>
      </ul>
    {{/each}}