Javascript 在页面呈现时将Ember bindAttr添加到类名称

我有一个Ember模板，其中包含两个按钮和一个div。这些按钮将控制器值切换为

true

和

false

。我正在使用

bindAttr

helper在当前切换的按钮和div上设置一个类

单击一个按钮后，这可以正常工作，但在初始页面呈现时未正确设置类名。如果我将

toggled

属性打印到它显示为正确值的模板中，它似乎不会影响类名绑定，直到它发生更改

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

隐藏面
隐藏面

App.MyController=Em.ObjectController.extend({
切换：fasle，
isToggled:function（）{
返回这个。get（'toggled'）；
}.property（'toggled'），
notToggled:function（）{
return！this.get（'toggled'）；
}.property（'toggled'），
行动：{
切换：函数（）{
此.set（'toggled'，true）；
},
toggleOff:function（）{
此.set（'toggled'，false）；
}
}
});

---

我希望这是一件非常简单的事情，但我一辈子都搞不清楚它是什么。有人能帮忙吗？这是一个jsbin，显示了相同的代码。

我认为问题就在这里

toggled: fasle,

难道不是吗

toggled: false,

正在工作的Jsbin

此外，您不需要具有用于返回

切换的
属性的truthy或falsy值的属性，您可以直接使用
切换的
属性作为绑定属性

<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:：处于活动状态
，当
toggled
为false时，此处设置了
处于活动状态

而且
bindAttr
的camelCased版本也不推荐使用，请改用
bindAttr

希望这些有助于快速更新，如果我在一个Ember.run.next块中设置初始值，它就会工作：init:function（）{var self=this；Ember.run.next（this，function（）{self.set（'toggled'，false）；}）；this._super.apply（this，arguments）；}，