属性更改时重新渲染视图答案

【问题标题】：Re-render view when property changes属性更改时重新渲染视图
【发布时间】：2014-04-04 09:32:56
【问题描述】：

每当设置active 属性时，我都有以下视图显示选中标记：

App.ActiveEntryView = Ember.View.extend({

    render: function(buffer) {
        var active = this.get('active'), icon;
        if (active) {
            icon = 'fa fa-check';
        } else {
            icon = '';
        }
        return buffer.push(icon);
    }

});

但是如果我 active 属性发生变化，这不会重新渲染。这在我的模板中是这样绑定的：

{{#each model}}
    <tr class="odd-even">
        ....
        <td>{{view App.ActiveEntryView activeBinding="parked"}}</td>
        ....
    </tr>
{{/each}}

parked 是我要评估的模型的属性。但是，只要模型中的该属性发生更改，视图就不会重新呈现。我尝试添加观察者：

App.ActiveEntryView = Ember.View.extend({

    render: function(buffer) {
        var active = this.get('active'), icon;
        if (active) {
            icon = 'fa fa-check';
        } else {
            icon = '';
        }
        return buffer.push(icon);
    }.observes('active')

});

然后我得到一个错误：

Uncaught TypeError: undefined is not a function

参考线：

        return buffer.push(icon);

我猜观察者触发了渲染函数，传递了一个不同于buffer的参数。

那我怎样才能重新渲染视图呢？

【问题讨论】：

标签： ember.js

【解决方案1】：

我不太了解视图，但据我了解，这不是重新渲染的方法。具体来说，render 是系统在需要渲染模板时调用的钩子。自己调用钩子不会强制系统重新渲染模板，这必须在更高级别完成。

话虽如此，可能有一种方法可以强制重新渲染整个视图，但这似乎不是解决大多数问题的好方法。我看到你正在用图标做一些事情，所以我会在不知道你的整个问题的情况下尝试解决方案。如果您发布更多详细信息，我可能会为您提供更多帮助。

据我所知，当active 属性更改时，您似乎正在尝试更改视图中元素的图标。您可以这样做：

在您的视图模板中：

<i {{bind-attr class='view.active:fa view.active:fa-check'}}></i>

你可以看到更多关于绑定类名here的细节。

【讨论】：