javascript - Ember - binding nested arrays -

i have ember component takes in array it's content , each item renders checkbox if it's object or new nested instance if it's array.

the component needs able bind data both first set of items in root array , nested items. though of using computed properties , observers ember states you cannot use nested forms todos.@each.owner.name or todos.@each.owner.@each.name.

any idea how can achieved?

component:

<dl class="selection-list">     {{#each content}}         <dd>             {{#isarray this}}                 {{selection-list content=this}}             {{else}}                 <label class="checkbox">                     {{input type="checkbox" checked=selected disabled=disabled}}                     {{label}}                 </label>                  {{#isarray children}}                     {{selection-list content=children}}                 {{/isarray}}             {{/isarray}}         </dd>     {{/each}} </dl> 

model:

app.applicationroute = ember.route.extend({   model: function () {     return {       items: [         {           label: '1'         },         {           label: '2',            children: [             {               label: '2.1'             },              {               label: '2.2',               children: [                 {                   label: '2.2.1'                 },                 {                   label: '2.2.2'                 },                 {                   label: '2.2.3'                 }               ]             }           ]         },         {           label: '3'         },         {           label: '4'         }       ]     };   } }); 

use of binding:

app.applicationcontroller = ember.objectcontroller.extend({     selectioncount: function () {        return this.get('items').filterby('selected').length;     }.property('items.@each.selected') }); 

example:
http://jsbin.com/yipuw/1/edit?html,js,output

i solved using views. key points are:

• changed component view. want keep same context n levels of nesting.
• used ember.checkbox , handled change event in there can modify selectcount clicks happen instead of iterating through list of checkboxes every time 1 of them changes.

check out: http://jsbin.com/nuzex/1/edit?html,js,console,output