ホームページ >ウェブフロントエンド >jsチュートリアル >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]: 親ノードを表します。
$root
$component
$data
<ul data-bind="foreach: ['cats', 'dogs', 'fish']"> <li>The value is <span data-bind="text: $data"></span></li> </ul> $index(仅在foreach binding中可用)
$parentContext
$rowData