javascript - How to update nested object in Ember -

i'm writing application using emberjs 2.4. have following service generates objects of objects of random data:

export default ember.service.extend({     crits: {},     loadcrits() {         var newcrits = {};         var max = math.random() * 10;         for(var i=0; i<max; i++) {             var crit = {};             var num = math.random() * 5;             for(var j=0; j<num; j++) {                 crit["data"+j] = j;             }              newcrits["crit"+i] = crit;         }          this.set("crits", newcrits);     } }); 

i have component displays data in table. each key-value pair of each nested object, have button user can change value:

<table>     {{#each-in critservice.crits |key crit|}}     <tr>         <td>key</td>         <td><ul>             {{#each-in crit |k v|}}                 <li>                     {{k}} = {{v}}                     <button {{action "modifycrit" crit k}}>change</button>                 </li>             {{/each-in}}         </ul></td>     </tr>     {{/each-in}} </table> 

the component handles action thusly:

export default ember.component.extend({     critservice: ember.inject.service(),     actions: {         modifycrit(crit, k) {             ember.set(crit, k, "new value");         }     } }); 

the problem view not updated. if understand correctly, because ember doesn't know how link "crit" nested object "critservice" came. there no event/observer triggered update view.

how can modify when user clicks button, view updated new value?

you need change data structure. provide twiddle. please check out this twiddle