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') });
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 modifyselectcount
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
Comments
Post a Comment