日々精進

新しく学んだことを書き留めていきます

knockoutで要素の表示・非表示を切り替える。CSSクラスを追加・削除する。

表示・非表示を切り替えるのはvisible bindingを使用する。以下のようにするとconditionがtrueの場合に表示する

<div data-bind="visible: condition">

CSSクラスを追加・削除するのは以下のようにする。conditionがtrueの場合に追加され、falseにすると削除される。

<div data-bind="css: { profitWarning: condition }">

複数のクラスを追加・削除できる。

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">

参考:

http://knockoutjs.com/documentation/css-binding.html