在bind-attr Handlebars Ember.js中使用条件语句

Question

如何在Handlebars模板中使用条件语句，结果有限。 如果只有一个按钮点击，我可以让它工作正常，因为它是静态然后当我测试两个按钮没有骰子 -

<a {{bind-attr class="isClicked:clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>
<a {{bind-attr class="isClicked:clicked"}} {{action 'lowerValue'}}><i class="fa fa-caret-down"></i></a>

在我的控制器 -

selected: '', 
isClicked: function (sender) {
    return this.get('selected') === sender;
}.property('selected'),
actions: {
    raiseValue: function() { this.set('selected', 'raise'); }
}

我期望发生什么 -

当clicked的值发生更改时，它会将其传递给我的anon函数，并返回clicked ===传入的对象的单击值的值。

会发生什么

发件人==='isClicked'在那个场景中

我尝试在绑定中使用条件语句，但这根本不起作用 -

<a {{bind-attr class="(isClicked === 'raise'):clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>

基本上我试图模仿一个单选按钮如何工作我猜...有什么想法在这里出了什么问题？

Answer 1

您不能将参数传递到这样的计算属性中。 简单的解决方案是将它拆分为：

isRaiseClicked: function () {
    return this.get('selected') === "raise";
}.property('selected'),

isLowerClicked: function () {
    return this.get('selected') === "lower";
}.property('selected'),

<a {{bind-attr class="isRaiseClicked:clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>
<a {{bind-attr class="isLowerClicked:clicked"}} {{action 'lowerValue'}}><i class="fa fa-caret-down"></i></a>