knockout.js - ノックアウトを使用して if 条件で CSS クラスを設定する

Question

ブートストラップ css クラスを if 条件付きのスパンに設定したい (バインドされた値まで)。リストにisApprovedフィールドがあります。アクティブな場合は「label-success」クラス、非アクティブな場合は「label-important」クラスのフィールドを表示したい

この行を追加しましたが、常に最初のクラスを取っています

data-bind="
    text: isApproved,
    css: isApproved = 'true' ? 'label label-important' : 'label label-important'"

HTMLで可能ですか、それともVMに計算フィールドを追加する必要がありますか?

score 62 · Accepted Answer

私の理解が正しければ、これがあなたが探しているバインディングです。

 data-bind="text: isApproved, css: {
    'label' :  true,
    'label-success' :  isApproved(),
    'label-important':  !isApproved()
 }"

お役に立てば幸いです。

score 39 · Accepted Answer

三項演算子の例

<span class="label"
    data-bind="text: isApproved,
               css: isApproved() == true ? 'label-success' : 'label-important'">
</span>

2 に答える 2