"visible" バインディング

用途

visible バインディングは渡された値に応じて、関連付けられた DOM エレメントの 表示 / 非表示 を切り替えます。

例

<div data-bind="visible: shouldShowMessage">
	このメッセージは "shouldShowMessage" が true を保持している場合にのみ表示されます。
</div>
 
<script type="text/javascript">
	var viewModel = {
		shouldShowMessage: ko.observable(true) // 最初はメッセージを表示
	};
	viewModel.shouldShowMessage(false); // ... メッセージを非表示に
	viewModel.shouldShowMessage(true); // ... メッセージを表示
</script>

パラメタ

• 主パラメタ

  • パラメタが false ライク な値として解決される場合 (boolean 値の false, 数値の0, null, undefined の何れか)、 このバインディングは yourElement.style.display に none を設定することにより、エレメントを非表示にします。 これは CSS による display スタイル定義より優先されます。

  • パラメタが true ライク な値として解決される場合 (boolean 値の true, もしくは null でないオブジェクトや配列)、 このバインディングは yourElement.style.display の値を削除することにより、エレメントを表示します。

    ※このとき、あなたが CSS で設定したどんな display スタイル定義も適用されます。 (したがって、display:table-row のような CSS ルールも、このバインディングと連携してうまく動きます。)

  このパラメタの値が Observable である場合、このバインディングは値が変更される度にエレメントの 可視 / 不可視 を更新します。 Observable でない場合は、エレメントの 可視 / 不可視 は一度だけ設定され、以降は更新されません。

• 追加パラメタ
  • なし

(注) 関数および式を使ってエレメントの 可視 / 不可視 をコントロールする

パラメタの値として、関数および任意の式を使うこともできます。 関数および式を用いた場合、Knockout はその 関数を実行 / 式を評価 し、その結果をエレメントを隠すかどうかの判定に使用します。

例:

<div data-bind="visible: myValues().length > 0">
	このメッセージは 'myValues' に
	一つ以上の要素が含まれているとき表示されます。
</div>
 
<script type="text/javascript">
	var viewModel = {
		myValues: ko.observableArray([]) // 最初は空:メッセージは非表示
	};
	viewModel.myValues.push("some value"); // これでメッセージが表示される
</script>

依存

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