Ember、#if item.value inside #each、値が変更されたときにページが更新されなかった

Question

setupController: function(controller, model) { 
     controller.set('testItem', [ 
     Em.Object.create({name: 'aaa', hilight: false}), 
     Em.Object.create({name: 'BBB', hilight: true}), 
     Em.Object.create({name: 'ccc', hilight: false}) 
     ]); 
    }, 

ルートにsetupControllerを設定しました。

changeTest: function(item){ 
    item.hilight = !item.hilight; 
}, 

コントローラでこの操作を行います。 ハンドルバーコードは、このようなものです：

{{#each item in testItem}} 
    {{#if item.hilight}} 
     <div> 
      <h4>{{item.name}}</h1> 
     </div> 
    {{else}} 
     <div> 
      <i>{{item.name}}</i> 
     </div> 
    {{/if}} 
    <button {{action changeTest item}}></button> 
{{/each}} 

アクション機能は、私がアクションをクリックしたときに正常に実行されますが、ページを更新することができませんでした。

だから、何が問題なのですか？

Answer 1

hilightの値を変更するには、changeTestアクションでsetterを使用する必要があります。

changeTest: function(item){ 
    item.toggleProperty('hilight'); 
},