我有一个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。
最佳答案
我认为问题出在这里
toggled: fasle,
不应该
toggled: false,
工作的Jsbin here
另外，您不必具有返回
toggled属性的true或falsy值的属性，可以直接使用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。希望这些帮助