Как связать несколько классов с тройными условиями?

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

на основе ваших комментариев, это звучит, как вы хотите сделать это внутри компонента. Так что ...

Вы можете иметь компонент, который определяется следующим образом:

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

Затем вы можете вызвать компонент в шаблоне следующим образом:

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

Работа демо here

Answer 2

Установить ember-truth-helper addon для eq helper

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

если вы хотите привязки, то рассмотрим без кавычек,

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