1

我有一个 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。

4

1 回答 1

3

我认为问题出在这里 

toggled: fasle,

不应该

toggled: false,

一个工作的 Jsbin在这里

此外，您不需要具有用于返回属性的真值或假值的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为 false

并且bindAttr不推荐使用 camelCased 版本，请bind-attr改用。

希望这些有帮助

于 2013-09-05T08:24:29.563 回答