"html" バインディング

用途

html バインディングは関連付けられた DOM エレメントに、指定したパラメータの HTML を表示します。

ViewModel の値が、レンダリングしたい HTML マークアップ文字列である場合に使います。

例

<div data-bind="html: details"></div>
 
<script type="text/javascript">
	var viewModel = {
		details: ko.observable() // 最初は空
	};
	viewModel.details("<em>詳細は <a href='report.html'>こちら</a> をご覧ください。</em>"); // HTML コンテンツが表示される
</script>

パラメタ

• 主パラメタ

  Knockout はこのパラメタの値を、対象のエレメントの innerHTML に設定します。 以前の内容は全て上書きされます。

  このパラメタの値が Observable である場合、値が変更される度にエレメントの内容を更新します。 Observable でない場合は、エレメントの内容は一度だけ設定され、以降は更新されません。

  もし数値や文字列以外の値を指定した場合、その値の toString メソッドにて文字列化した内容が innerHTML に設定されます。

• 追加パラメタ

  なし

(注) HTML エンコーディングについて

このバインディングは、innerHTML を使ってエレメントにコンテンツを設定します。 したがって、信頼できないデータソースの値を使用しないよう注意する必要があります。 なぜなら、第三者により悪意のあるスクリプトが混入される可能性があるからです。 表示する値が安全である確証がない場合、innerText または textContent を使用して値を表示する "text" バインディング を使用することができます。

依存

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