バインディング・コンテキスト

バインディング・コンテキストは、バインディングから参照できるデータをもつオブジェクトです。バインディングの適用にあたって、Knockout は自動的にバインディング・コンテキストの階層を作成・管理します。階層のルートは、ko.applyBindings(viewModel) に渡した viewModel です。また、with や foreach などのフロー制御バインディングを使う度に、ネストされた ViewModel データを参照する子コンテキストが作成されます。

バインディング・コンテキストはどのバインディングでも参照できる、次の特別な変数を提供します。

$parent

親コンテキストの ViewModel オブジェクトであり、現コンテキストの一つ外側にあたります。ルートコンテキストでは undefined です。

<h1 data-bind="text: name"></h1>

<div data-bind="with: manager">
	<!-- ネストされたバインディング・コンテキスト内部 -->
	<span data-bind="text: name"></span> は
	<span data-bind="text: $parent.name"></span> のマネージャーです。
</div>

$parents
すべての親 ViewModel の配列で、次のようになっています。

$parents[0] ...親のコンテキストの ViewModel ($parent と同じ)

$parents[1] ...親の親のコンテキストの ViewModel

$parents[2] ...親の親の親のコンテキストの ViewModel

...ルートコンテキストの ViewModel まで続く
$root
ルートコンテキストにあたるメインの ViewModel であり、最上位のコンテキストです。
$parents[$parents.length - 1] と同義です。
$data
現在のコンテキストの ViewModel です。ルートコンテキストに限り、$data と $root は同義です。 $data は、次の例のように ViewModel のプロパティではなく ViewModel 自体を参照したいときに便利です。
```
<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
	<li>値は <span data-bind="text: $data"></span> です</li>
</ul>
```
$index (foreach バインディング内でのみ使用可能)
foreach バインディングによってレンダリングされる、配列の現在の要素のインデックスです。他のコンテキスト変数と違って $index は Observable であり、配列へのアイテム追加・削除などによるアイテムのインデックスの変動により更新されます。
$parentContext
親の階層のバインディング・コンテキスト・オブジェクトを指します。これは、親の階層の ViewModel を指す $parent とは異なります。例えば、外側の foreach のアイテムのインデックスに、内側のコンテキストからアクセスするときに便利です。 (使い方: $parentContext.$index)
ルートコンテキストでは undefined です。

次の特別な変数もバインディングに使用できますが、バインディング・コンテキスト・オブジェクトのプロパティではありません。

$context

現在のバインディング・コンテキスト・オブジェクトを指します。 ViewModel にコンテキスト変数と同名のプロパティがある場合に、コンテキスト変数にアクセスするために使うことができます。また、コンテキスト・オブジェクトを引数に関数を呼び出す、という場面があるかもしれません。

<ul data-bind="foreach: items">
	<li>
		名前: <span data-bind="text: name"> </span>
		ViewModelの $index: <span data-bind="text: $index"> </span>
		コンテキストの $index: <span data-bind="text: $context.$index"> </span>
		コンテキストを解析: <div data-bind="html: analyzeContext($context)"></div>
	</li>
</ul>

<script>
	ko.applyBindings({
		items: ko.observableArray([
			{ name: "A", $index: 10 },
			{ name: "B", $index: 20 },
			{ name: "B", $index: 30 }
		])
	});
</script>

$element
現在のバインディングにおける、エレメントの DOM オブジェクト (バーチャルエレメントの場合はコメントの DOM オブジェクト) です。次の例のように、現在のエレメントの属性にアクセスする必要があるときに便利です。
```
<div id="item1" data-bind="text: $element.id"></div>
```

カスタムバインディングでバインディング・コンテキストを制御・加工する

ビルトインバインディングの with や foreach のように、カスタムバインディングで配下のエレメントのバインディングコンテキストを変更、またはバインディング・コンテキスト・オブジェクトを拡張して特別な変数を追加することができます。これについては、配下のバインディングを制御するカスタムバインディングを作成するにて詳しく説明します。

原文はこちら