"css" バインディング

用途

css バインディングは一つまたは複数の CSS クラスを関連付けられた DOM エレメントに追加・削除します。簡単な例では、「マイナスの数値であれば赤でハイライトする」といった場合に便利です。

注: CSS クラスを用いずに、直接スタイル属性をアサインしたい場合は、"style" バインディングを使います。

例 : 静的なクラス

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
	損益情報
</div>
 
<script type="text/javascript">
	var viewModel = {
		currentProfit: ko.observable(150000) // 正の値なので、"profitWarning" クラスは適用されない。
	};
	viewModel.currentProfit(-50); // これで "profitWarning" クラスが適用される
</script>

上記の例では、profitWarning という CSS クラスは currentProfit の値がゼロを下回ったときに適用され、ゼロ以上になれば除去されます。

例 : 動的なクラス

<div data-bind="css: profitStatus">
	損益情報
</div>

<script type="text/javascript">
	var viewModel = {
		currentProfit: ko.observable(150000)
	};

	// 正の値として評価されるため、まず "profitPositive" クラスが適用される
	viewModel.profitStatus = ko.computed(function() {
		return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
	}, viewModel);

	// "profitPositive" クラスは除去され、"profitWarning" クラスが適用される
	viewModel.currentProfit(-50);
</script>

上記の例では、currentProfit が正の値であれば profitPositive クラスが適用され、負の値であれば profitWarning クラスが適用されます。

パラメタ

主パラメタ
静的な CSS クラス名を使う場合は、CSS クラス名と同じ名前のプロパティをもつ JavaScript オブジェクトを渡します。それぞれのプロパティは true または false として評価され、結果に応じてそれぞれのクラスが適用・除去されます。

一度に複数の CSS クラスを設定できます。
```
<div data-bind="css: { profitWarning: currentProfit() < 0,
					   majorHighlight: isSevere }">
```
次のように、クラス名 (プロパティ) をクォートでくくることで、一つの条件に合致する場合に複数のクラスを設定することができます。
```
<div data-bind="css: { profitWarning: currentProfit() < 0,
					   'major highlight': isSevere }">
```
boolean ではない値はルーズに boolean として解釈されます。例えば、0 と null は false として扱われ、 21 や null でないオブジェクトは true として扱われます。

パラメタが参照している値が Observable である場合、バインディングは値が変更される度に CSS クラスを追加・除去します。 Observable でない場合、CSS クラスは一度だけ追加・除去され、以降はそのままとなります。

動的な CSS クラス名を使う場合は、CSS クラス名に一致する文字列を渡すことで、その CSS クラスを対象のエレメントに追加できます。パラメタが参照している値が Observable である場合、値が変更されると、前回追加したクラスを全て除去した後 Observable の新しい値に一致するクラスを追加します。

また、関数や任意の式をパラメタの値として使用することもできます。 Knockout はそれらの評価結果の値を、特定の CSS クラスを追加するのか削除するのかの判定に使用します。
追加パラメタ
なし

(注) JavaScript 変数名として無効な名前の CSS クラスを適用するには

my-class のような CSS クラスを適用するとき、次のように書くことはできません。

<div data-bind="css: { my-class: someValue }">...</div>

なぜなら、my-class はこの場合において正当ではない名前だからです。これは、名前を文字列リテラルにするためクォートで囲むだけで解決します。この書き方は JavaScript オブジェクトリテラルの正当な構文です。 (技術的には、JSON の仕様において常にクォートで囲むべきとされていますが、実際のところはどちらでも構いません)

<div data-bind="css: { 'my-class': someValue }">...</div>

依存

Knockout コアライブラリ以外、なし。

原文はこちら