Ember bindAttr 到页面渲染上的类名答案

【问题标题】：Ember bindAttr to classname on page renderEmber bindAttr 到页面渲染上的类名
【发布时间】：2013-09-05 16:32:37
【问题描述】：

我有一个 Ember 模板，其中包含两个按钮和一个 div。按钮将控制器值切换为 true 和 false。我正在使用 bindAttr 帮助器在当前切换的按钮和 div 上设置一个类。

一旦我单击了一个按钮，它就可以正常工作，但是在初始页面渲染时类名没有正确设置。如果我将 toggled 属性打印到模板中，它显示为正确的值，它似乎不会影响类名绑定，直到它发生变化。

我的代码的简化版本如下所示：

<div {{bindAttr class="toggled:is-toggled"}}></div>
<button {{action toggleOn}} {{bindAttr class="isToggled:is-active"}}>Toggle on</button>
<button {{action toggleOff}} {{bindAttr class="notToggled:is-active"}}>Toggle off</button>

App.MyController = Em.ObjectController.extend({
  toggled: fasle,

  isToggled: function() {
    return this.get('toggled');
  }.property('toggled'),

  notToggled: function() {
    return !this.get('toggled');
  }.property('toggled'),

  actions: {
    toggleOn: function() {
      this.set('toggled', true);
    },

    toggleOff: function() {
      this.set('toggled', false);
    }

  }
});

我希望这真的很简单，但我终其一生都无法弄清楚它是什么。任何人都可以帮忙吗？这是一个显示相同代码的 jsbin http://jsbin.com/esURuWE/8/edit。

【问题讨论】：

快速更新，似乎如果我在 Ember.run.next 块中设置初始值，它就可以工作： init: function() { var self = this; Ember.run.next(this, function() { self.set('toggled', false); }); this._super.apply(this, arguments); },

标签： javascript ember.js

【解决方案1】：

我认为问题出在这里

toggled: fasle,

不应该吗

toggled: false,

一个工作的 Jsbin here

另外，toggled属性的返回真值或假值不需要属性，可以直接使用toggled属性作为绑定属性

<button {{action toggleOn}} {{bind-attr class="toggled:is-active"}}>Toggle on</button>
<button {{action toggleOff}} {{bind-attr class="toggled::is-active"}}>Toggle off</button>

注意toggled::is-active，这里is-active是在toggled为假时设置的

而且bindAttr 的驼峰式版本已被弃用，请改用bind-attr。

希望对你有帮助

【讨论】：