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

"with" バインディング

用途

with バインディングは新たな バインディング・コンテキスト を作成します。配下のエレメントは指定したオブジェクト内でバインドされます。

もちろん、with バインディングをいくつでも入れ子にすることができますし、 if や foreach のような別のフロー制御バインディングと同時に使うこともできます。

例1

バインディング・コンテキストを子オブジェクトに切り替える基礎的な例です。 注目すべき点は data-bind 属性の中で、latitude や longitude にプレフィックス coords. を付ける必要がないことです。 なぜならバインディング・コンテキストが coords に切り替わっているからです。 

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
	緯度: <span data-bind="text: latitude"> </span>,
	経度: <span data-bind="text: longitude"> </span>
</p>
	
<script type="text/javascript">
	ko.applyBindings({
		city: "ロンドン",
		coords: {
			latitude:  51.5001524,
			longitude: -0.1262362
		}
	});
</script>

例2

このデモから次の2つのことがわかります。

  • with バインディングは、関連付けられた値が null/undefined なのか否かに基づいて、配下のエレメントを動的に 追加・削除 します。
  • $parent や $root などのコンテキスト変数 を使って、親のバインディング・コンテキストにあるプロパティ/関数にアクセスすることができます。

試してみましょう:

Twitter アカウント:

最終取得日時

ソースコード: View

<form data-bind="submit: getTweets">
	Twitter アカウント:
	<input data-bind="value: twitterName" />
	<button type="submit">ツイートを取得</button>
</form>

<div data-bind="with: resultData">
	<h3>最終取得日時<span data-bind="text: retrievalDate"> </span></h3>
	<ol data-bind="foreach: topTweets">
		<li data-bind="text: text"></li>
	</ol>

	<button data-bind="click: $parent.clearResults">ツイートをクリア</button>
</div>

ソースコード: ViewModel

function AppViewModel() {
	var self = this;
	self.twitterName = ko.observable('@StephenFry');
	self.resultData = ko.observable(); // 初期値なし

	self.getTweets = function() {
		twitterApi.getTweetsForUser(self.twitterName(), function(data) {
			self.resultData({
				retrievalDate: new Date(),
				topTweets: data.slice(0, 5)
			});
		});
	}

	self.clearResults = function() {
		self.resultData(undefined);
	}
}

ko.applyBindings(new AppViewModel());

パラメタ

  • 主パラメタ

    配下のエレメントのバインディングのためのコンテキストとして使いたいオブジェクトです。

    null や undifined として評価された場合、 配下のエレメントはバインドが適用されず、ドキュメントから削除されます。

    式が Observable を伴う場合、その値が変更されるたびに式が再評価されます。 その際、配下のエレメントは一度クリアされ、マークアップの新たなコピーがドキュメントに追加され、 式の返却値が新たなコンテキストとしてバインドされます。

  • 追加パラメタ

    なし

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

if や foreach などの他のフロー制御バインディングと同じく、with をコンテナエレメントなしで設置することができます。 新たなコンテナエレメントを導入できない状況でコンテキストを切り替える場合に便利です。 詳細は if もしくは foreach をご覧ください。

例:

<ul>
	<li>ヘッダアイテム</li>
	<!-- ko with: 出発便 -->
	...
	<!-- /ko -->
	<!-- ko with: 到着便 -->
	...
	<!-- /ko -->
</ul>

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

依存

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

原文はこちら

side menu