Ember.js/rendering nested array content on handlebars

Question

I have a model 'transaction' in which an array of subCategories is declared. This array is populated with transaction type objects whenever the method 'add_subcagtegory' of transactionsController is called. Now when i try to render subcategories in a nested loop(#collection), i do not get it done. The outer loop(#each) that is rendering the array controller objects is working fine. Can anyone tell how to render the subCategories array?

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 the template:

<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 the template under collection,How can I access subCategories?

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

sly7_7 · Accepted Answer · 2012-08-03 12:56:32Z

2

Does simply binding the content of the {{collection}} helper to this.subcategories (this is a transaction in your context) work ?

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

Update

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

Please note the ember version is the latest-one. You should update, as the 0.9.5 is very old. I didn't have a look of the <select> behavior, but if it does'nt work, I think you have now all the keys to make it works :)

edited Aug 3, 2012 at 12:56

answered Aug 3, 2012 at 9:37

sly7_7

12k3 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sly7_7 Over a year ago

It's weird, because you define subcategories as an Array in the transaction object... could you post a jsfiddle of your code ?

sly7_7 Over a year ago

Ok, looks like the add_category function is buggy. I'll have a look this afternoon. Could you edit your question with a jsfidlle, or at least show how do you use this function ?

Zed Over a year ago

this how its being used <td><button onclick="App.transactionsController.add_subcategory(this);" value="{{unbound record_index}}">+</button></td> will post a jsfiddle shortly

Zed Over a year ago

updated question with a jsfidlle, clicking on the (+) button adds the subcategory but does,nt display anything

ajkhond · Accepted Answer · 2012-09-05 19:11:48Z

0

I modified the ember version from latest to pre 1.0 and the clicking on the + works.

http://jsfiddle.net/y3YX9/

edited Sep 5, 2012 at 19:11

answered Aug 31, 2012 at 11:12

ajkhond

11 bronze badge

Collectives™ on Stack Overflow

Ember.js/rendering nested array content on handlebars

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related