Question

假设labelCls, mandatory和optional是预定义的CSS类。

示例代码：

<div {{bind-attr class=":labelCls (isRequired == "required"?mandatory:optional")}}>
  Warning!
</div>

想成为isRequired = "required";

<div class="labelCls mandatory">
  Warning!
</div>

Answer 1

为eq helper安装ember-truth-helper插件

<div class='labelCls {{if (eq isRequired 'required') 'mandatory' 'optional)}}'>
  Warning!
</div>

如果你想要绑定，那么考虑不加引号，

<div class={{if (eq isRequired 'required') 'labelCls mandatory' 'labelCls optional)}}>
      Warning!
    </div>

Answer 2

根据您的评论，听起来您想在组件内执行此操作。所以......

您可以拥有一个定义如下的组件：

App.ReqClassComponent = Em.Component.extend({
  isRequired: function(){
    var someParam = this.get('someParam');
    return someParam === 'required';
  }.property()
});

然后，您可以按如下方式调用模板中的组件：

{{ req-class someParam='required' }}

工作演示here

如何用三元条件绑定多个类？

2 个答案: