Add and push additional objects on the fly with Ember
I am trying to add and add additional objects to my application. I have reproduced this case in jsBin
To achieve this, I followed this tutorial , which does exactly what I want.
I have a list of invoices and any invoice consists of transactions. I can create a new account in my accounts, create a route where I want to add and push any 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, it looks like this:
<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 don't see the error in the console. I don’t know what’s going wrong.
If you delete from the template {{#each controller}}{{/each}}
, you can see one transaction.
What's wrong with my code?
source to share
I made some changes but it needs improvement, feel free to ask additional questions to improve it. Also see the emberjs manuals for an example todo . The tutorial is probably out of date, see Ember store.push with hasMany not updating the template? ...
I refactored your add method like this:
add: function() {
var transactionRecord = this.store.createRecord('transaction', {
name: 'new transaction'
});
return this.get("model.transactions").addObject(transactionRecord);
}
The template for loop transactions looks like this:
{{#each model.transactions}}
Finally, I added a template invoices/index
so you can see invoices and their transactions when you click on an invoice:
<script type="text/x-handlebars" data-template-name="invoice/index">
<p> Invoice Index Route</p>
<p> {{title}} </p>
<p> Transactions: </p>
{{#each transactions}}
<ul>
<li> name: {{name}} </li>
<li> quantity: {{quantity}} </li>
</ul>
{{/each}}
</script>
Example: http://jsbin.com/gugukewaka/1/edit
source to share
The Embers #each
helper switches the current area as follows:
// this context is the controller
{{#each controller}}
<td>{{name}}<td/> // this context is each transaction
{{/each}}
So whenever you try to access controllers
, you try to access it on a transaction object where it doesn't exist. The reason this worked in the tutorial is you followed the guy there not trying to access the controller property. Don't worry, this is confusing for a lot of people and will therefore be deprecated in future versions of ember.
To solve your problem, just use
// this context is the controller
{{#each transaction in controller}}
<td>{{transaction.name}}<td/> // this context is still the controller
{{/each}}
or in your specific use case:
<tr>
{{#each transaction in controller}}
<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>
source to share
In your shader / edit template, you use
{{#each controller}}
but yours InvoicesCreateController
is ObjectController
which is causing the problem. Either don't use #each
in the template because I don't understand why this is required, or if you really need to change InvoicesCreateController
to ArrayController
.
source to share