Knockout についてと、Knockout を使用して context_javascript スキルをバインドする方法について

ノックアウトの紹介

Knockout (ko と呼ばれる) は、MVVM 設計パターン (つまり、Model、view、viewModel) を使用して双方向バインディングとリアルタイム更新をシンプルかつエレガントに実装する軽量の JavaScript クラス ライブラリです。データ モデルを使用して、リッチで応答性の高いユーザー インターフェイスを作成します。

Knockout には 3 つの主要な機能があります:

1. エレガントな依存関係の追跡: データ モデルが変更されるたびに、対応する UI 部分が自動的に更新されます。

2. 宣言型バインディング: UI をデータ モデルに関連付けるだけで、複雑な動的 UI を作成できます。

3. 簡単に拡張可能: カスタム動作を宣言的なバインディングとして実装するには、数行のコードだけが必要です。

その他の利点:

1. 純粋な JavaScript コード

2. 既存の Web アプリケーションにいつでも追加できます

3. 軽量、GZIP 後はわずか 13K

4. ほぼすべての主流ブラウザ (IE 6 以降、Firefox 2 以降、Chrome、Safari、Edge など) で動作可能;

ko は MVVM 設計パターン、つまりモデル ビュー viewModel を使用します。

簡単な例

There are <span data-bind="text: myItems().length"></span> items 

非常に簡単です。テキストの内容を更新するためのコードを記述する必要はありません。同様に、配列の長さを使用してボタンの可用性を制御したい場合は、次のようにします。必要なのは
だけです

<button data-bind="enable: myItems().length < 5">Add</button>

以下では、Knockout を使用してコンテキストをバインドする方法を紹介します

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

バインディング コンテキストは、バインディング内で参照できるデータを保持するオブジェクトです。 Knockout は、バインディングを適用するときに、バインディング コンテキストの継承関係を自動的に作成および管理します。この階層のルートは、指定した viewModel パラメーター (ko.applyBindings(viewModel)) を参照します。

次に、with や foreach などの制御フローを使用して、ネストされた viewModel データを参照するたびに子ノード バインディング コンテキストを作成します。

$parent

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

$parents

これはすべての親ノード ビュー モデルを表す配列です

$parent[0]: 親ノードを表します。

$parent[1]: 祖父母ノードを表します。

$parent[1]: 曽祖父ノードを表します。

....など

$root

これは、ルート コンテキストのルート ノード ビュー モデル オブジェクトであり、通常は ko.applyBindings を通じて指定され、$parents[$parents.length - 1] と同等です。

$component

特定のコンポーネント テンプレートのコンテキストにいる場合、$component はそのコンポーネントを指定し、その指定されたコンポーネントは、ネストされたコンポーネントの場合、最も近いコンポーネントを表します。

$data

現在のコンテキストの viewModel オブジェクトを表します。$data と $root は同等です。ネストされたバインディング コンテキストでは、このパラメーターは現在のデータ項目に設定されます。

$data は、たとえば、viewModel のプロパティではなく viewModel 自体を参照したい場合に非常に便利です。

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

これは、foreach バインディング内の配列の 0 から始まるインデックス エントリです。他のコンテキスト属性とは異なり、$index は監視可能です。つまり、配列項目が更新されると $index も更新されます。

$parentContext

は、親ノード レベルでバインディング コンテキスト オブジェクトを指定します。$parent との違いは、バインディング コンテキストではなく親ノード内のデータを指定することです。

$rowData

現在のコンテキストにおける元の viewModel の値です。通常は $data と同等ですが、viewModel が observable で変更された場合、$data は観察不可能になり、$rowData は観察可能になります。