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

您应该在 changeTest 操作中使用 setter 来更改 hilight 的值。

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

Ember, #if item.value inside #each, 当值改变时，页面没有更新

Ember, #if item.value inside #each, when value changed, the page did not update

if-statement

ember.js

each

helper