设置类名绑定的属性答案

【问题标题】：Setting property for class name binding设置类名绑定的属性
【发布时间】：2015-09-01 01:32:28
【问题描述】：

我在让我的类名绑定基于返回 true 或 false 的属性正确更改 div 上的类时遇到了一些问题。

export default Ember.Route.extend({
  isConnected: function() {
    return false;
  }.property(),
  actions: {
    var self = this;
    [some ajax action]
    success: function(data){
      self.set('isConnected', true);
    }
  }
  ...
});

在模板中我有典型的类名绑定设置

<div class="progress">
  <div class="progress-bar {{if isConnected 'progress-bar-success' 'progress-bar-danger'}}" style="width: 101%;"></div>
</div>

它似乎不起作用，我没有收到任何错误

【问题讨论】：

此处的操作语法不正确。它应该是 actions: { actionName: function(){ .... }} 。看这里guides.emberjs.com/v1.10.0/templates/actions
@kushdilip 您链接到旧文档
isConnected 应该在控制器上，不需要是计算属性。
@Kitler 我的错。 google search 实际上默认给出了 v1.10.0 的文档。
考虑到 2.0 已经发布了大约 2 周，当然您将使用 1.10 文档，请确保在下拉列表中选择 1.13/2.0

标签： ember.js

【解决方案1】：

我为此创建了一个ember twiddle，它解释了在这种情况下类绑定是如何工作的。

Controller 的属性 isConnected 默认设置为 false。同一控制器上的操作会修改 isConnected，这会反映在视图模板中。

在您的情况下，route 上定义的属性因此未连接到模板化视图。

【讨论】：