Ember에서 중첩 된 객체를 업데이트하는 방법

Question

EmberJS 2.4를 사용하여 응용 프로그램을 작성하고 있습니다.

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); 
    } 
}); 

나는 테이블의 데이터를 표시하는 구성 요소를 가지고 : 나는 임의의 데이터 객체의 객체를 생성하는 다음과 같은 서비스가있다.

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

성분이 thusly 히 작용 취급 : 사용자가 값을 변경할 수 있도록 서로 중첩 된 객체의 각각의 키 - 값 쌍에 대해, I는 버튼이

export default Ember.Component.extend({ 
    critService: Ember.inject.service(), 
    actions: { 
     modifyCrit(crit, k) { 
      Ember.set(crit, k, "new value"); 
     } 
    } 
}); 

문제가 있다는 것이다를 보기가 업데이트되지 않습니다. 내가 올바르게 이해한다면 Ember는 "crit"중첩 된 객체를 "critService"와 연결하는 방법을 알지 못하기 때문입니다. 따라서 뷰를 업데이트 할 이벤트/관찰자가 트리거되지 않습니다.

사용자가 버튼을 클릭하면보기가 새 값으로 업데이트되도록 어떻게 수정할 수 있습니까?

Answer 1

데이터 구조를 변경해야합니다. 나는 너에게 뒤죽박죽을 제공한다. this twiddle