Ember.js / rendering the contents of a nested array on the steering wheel

Question

I have a transaction model in which an array of subcategories is declared. This array is populated with transaction type objects whenever the add_subcagtegory of transactionController method is called. Now when I try to display subcategories in a nested loop (#collection), I am not doing this. An outer loop (#each) that renders array controller objects works fine. Can anyone tell how to display an array of subcategories?

app.js

App.transaction=Em.Object.extend({ account:null, date:null, source:null, description:null, category:null, flag_for_later:null, amount:null, category_id:null, record_index:null, isSubCategory:null, subCategories:[] }); App.transactionsController = Em.ArrayController.create({ content: [], add_subcategory: function(param){ var records=this.toArray(); if (typeof(records[param.value -1].subCategories) === "undefined") { records[param.value -1].subCategories = new Array(); } var category=App.transaction.create({ account:"//", date:"//", source:"//", description:"//", category:" ", flag_for_later:" ", amount:null, category_id:records[param.value -1].subCategories.length + 1, isSubCategory:true }); records[param.value -1].subCategories.push(category); App.transactionsController.set('content',[]); App.transactionsController.pushObjects(records); App.array.push(obj1); } }); 

and pattern:

 <table> {{#each App.transactionsController}} <tr> <td>{{account}}</td> <td>{{date}}</td> <td>{{source}}</td> <td>{{view App.TextField class="span12" style="border:0px;" objcount=record_index fieldname="description" value=description}}</td> <td>{{view App.TextField class="span12" style="border:0px;" objcount=record_index fieldname="category" value=category }}</td> <td><button onclick="App.transactionsController.add_subcategory(this);" value="{{unbound record_index}}">+</button></td> <td>{{view App.TextField class="span6" style="border:0px;" objcount=record_index fieldname="flag_for_later" value=flag_for_later }}</td> <td>{{amount}}</td> </tr> {{#collection contentBinding="App.transactionsController.subCategories"}} <b>content does,nt not render</b> {{/collection}} {{/each}} </table> 

in a subfolder of the template, How can I access the subcategories?

http://jsfiddle.net/KbN47/29/

Answer 1

Is it easy to associate {{collection}} helper contents with this category ( this is a transaction in your context)?

 {{#collection contentBinding="this.subcategories"}} 

Update

Here is jsfiddle: http://jsfiddle.net/Sly7/tRbZC/

Please note that the ember version is the latest. You have to upgrade since 0.9.5 is very old. I have not seen the <select> behavior, but if it does not work, I think that you have all the keys to make it work :)

Answer 2

I changed the ember version from the latest to version 1.0 and clicking on +.

http://jsfiddle.net/y3YX9/