Knockout.js 日本語ドキュメント

"text" バインディング

用途

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

代表的に、<span> や <em> といったテキストを表示する伝統的なエレメントで用いる際に便利ですが、 技術的にはどんなエレメントでも使えます。

例

本日のメッセージ: <span data-bind="text: myMessage"></span>
 
<script type="text/javascript">
	var viewModel = {
		myMessage: ko.observable() // 最初は空
	};
	viewModel.myMessage("Hello, world!"); // これでテキストが表示される
</script>

パラメタ

  • 主パラメタ

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

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

    もし数値や文字列以外の値を指定した場合、その値の toString メソッドにて文字列化したテキストが表示されます。

  • 追加パラメタ

    なし

(注1) 関数および式を使ってテキストを決定する

テキストをプログラム上で判定する場合の選択肢のひとつに Computed Observable を作成する方法があります。 どういったテキストを表示するべきかを記述した評価関数を使用します。

例:

今日のアイテムは <span data-bind="text: priceRating"></span> です。
 
<script type="text/javascript">
	var viewModel = {
		price: ko.observable(24.95)
	};
	viewModel.priceRating = ko.computed(function() {
		return this.price() > 50 ? "高額" : "安価";
	}, viewModel);
</script>

これで、price の値が変化した時、条件に応じて "高額" と "安価" が切り替わります。

また、このように単純な判定であれば Computed Observable を用いずとも同じことができます。 text バインディングに、次のように任意の式を渡すことができます。 

今日のアイテムは <span data-bind="text: price() > 50 ? '高額' : '安価'"></span> です。

Computed Observable priceRating がなくても全く同じ結果が得られます。

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

このバインディングは、テキストノードを使ってテキストを表示します。 そのため、悪意のあるスクリプトを実行してしまうリスクもなく、安全に文字列を設定できます。 たとえば次のように記述した場合、 

viewModel.myMessage("Hello, world!");

...文字列は斜体で表示されず、HTML タグを含めてプレーンテキストとして表示されます。

HTML を表示させたい場合、"html" バインディング を使用して下さい。

(注3) コンテナエレメントなしで "text" を使う

ときには、余計なエレメントを増やすこと無く text バインディングを使いたいことがあるかもしれません。 例えば、option エレメントの中に他のエレメントを含めることはできません。 

<select data-bind="foreach: items">
	<option>アイテム「<span data-bind="text: name"></span>」</option>
</select>

対処法は、コメントタグを用いた コンテナレス構文 を使うことです。

<select data-bind="foreach: items">
	<option>アイテム「<!-- ko text: name--><!--/ko-->」</option>
</select>

このコメント <!--ko--> と <!--/ko--> は、 内部にマークアップを含む“バーチャルエレメント”の 開始 / 終了 のマーカーとしての役割をもっています。 Knockout はこのバーチャルエレメント構文を理解し、本当のコンテナエレメントがあるかのようにバインドします。

(注4) IE6 の空白に関する“癖”について

IE6 には、「空の span エレメントに続く空白は無視される」という謎な癖があります。 この現象に対して Knockout で直接できることはありませんが、次のように書きたい場合: 

Welcome, <span data-bind="text: userName"></span> to our web site.

... IE6 は to our web site のすぐ手前にある空白をレンダリングしませんが、 <span> の中に何らかのテキストを入れることで回避できます。 

Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

その他のブラウザおよび、IE6 より新しいバージョンの IE にはこの癖はありません。

依存

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

原文はこちら

side menu