ember.js - Ember values in Component not binding -

i have object gets entered component

{{edit-general item=item}} 

inside component, can edit values of array.

{{#each value in item.values}}     <div class="input-field col s6 l6">         {{input type='text' value=value}}     </div> {{/each}} 

however, value not bind. item gets changed inside component, change not affect model.

how make work way want to?

jsbin: http://jsbin.com/modunewoca/31/edit?html,output

you can't bind simple strings , objects, need wrap ember.object, allows bindings.

function m(data) {   return ember.object.create({     data: data   }); }  var model = [ember.object.create({   field: 'ethnicity',   values: [m('african american'), m('asian'), m('caucasian'), m('hispanic'), m('other')] }), ember.object.create({   field: 'gender',   values: [m('male'), m('female'), m('other'), m('prefer not disclose')] })]; 

  {{#each item in model}}     <div><b>{{item.field}}</b></div>     {{#each value in item.values}}       <div>{{value.data}}</div>       <div>{{edit-general value=value.data}}</div>     {{/each}}     <br><br>   {{/each}} 

updated jsbin: http://jsbin.com/xebizeyedu/2/edit