如何用三元條件綁定多個類？

假設labelCls, mandatory和optional是預定義的CSS類。如何用三元條件綁定多個類？

示例代碼：

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

想成爲如果isRequired = "required";

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

來源

2015-02-10 sri_bb

確定，你這話是什麼呢？ http://emberjs.jsbin.com/xopofa/1/edit?html,css,js,console,output – Kalman 2015-02-10 17:45:41

這個邏輯應該發生在你的控制器中，而不是... – Kalman 2015-02-10 17:53:31

假設如果我擴展Ember.Component並寫作在一個函數中的邏輯，如何在模板中調用該函數？請給我樣品語法？ :) – 2015-02-10 18:02:57

根據您的意見，這聽起來像你想這樣做一個組件內。所以......

你可以擁有的已定義一個組件，如下所示：

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

然後，你可以調用組件在你的模板如下：

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

工作演示here

來源

2015-02-10 18:13:18 Kalman

安裝ember-truth-helper eq幫手插件

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

如果你想結合再考慮不帶引號，

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

來源

2017-03-20 18:09:07 kumkanillam

如何用三元條件綁定多個類？

回答

相關問題