Question

我有一个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);
    }

  }
});

我希望这是非常简单的事情，但我不能为我的生活找出它是什么。有人可以帮忙吗？这是一个显示相同代码http://jsbin.com/esURuWE/8/edit的jsbin。

Answer 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的camelCased版本，而是使用bind-attr。

希望这些有帮助

Ember bindAttr到页面上的classname渲染

1 个答案: