KnockoutJS-宣言型バインディング

KnockoutJSの宣言型バインディングは、データをUIに接続するための強力な方法を提供します。

バインディングとObservablesの関係を理解することが重要です。技術的には、これら2つは異なります。通常のJavaScriptオブジェクトをViewModelとして使用でき、KnockoutJSはViewのバインディングを正しく処理できます。

Observableがないと、UIのプロパティは初めて処理されます。この場合、基になるデータの更新に基づいて自動的に更新することはできません。これを実現するには、バインディングをObservableプロパティを参照する必要があります。

バインディング構文

バインディングは2つのアイテムで構成されています。 name そして value。以下は簡単な例です-

Today is : <span data-bind = "text: whatDay"></span>

ここで、textはバインディング名であり、whatDayはバインディング値です。次の構文に示すように、複数のバインディングをコンマで区切ることができます。

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

ここでは、各キーが押されると値が更新されます。

バインディング値

バインディング値は single value、 literal、 variable またはすることができます JavaScript式。バインディングが無効な式または参照を参照している場合、KOはエラーを生成し、バインディングの処理を停止します。

以下は、バインディングのいくつかの例です。

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

次の点に注意してください-

空白は何の違いもありません。
KO 3.0以降では、バインディングに未定義の値を与えるバインディング値をスキップできます。

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

現在のバインディングで使用されているデータは、オブジェクトから参照できます。このオブジェクトは呼ばれますbinding context。

コンテキスト階層は、KnockoutJSによって自動的に作成および管理されます。次の表に、KOが提供するさまざまなタイプのバインディングコンテキストを示します。

シニア番号	コンテキストタイプと説明のバインド
1	$root これは常にトップレベルのViewModelを参照します。これにより、ViewModelを操作するためのトップレベルのメソッドにアクセスできるようになります。これは通常、ko.applyBindingsに渡されるオブジェクトです。
2	$data このプロパティは非常に似ています thisJavascriptオブジェクトのキーワード。バインディングコンテキストの$ dataプロパティは、現在のコンテキストのViewModelオブジェクトを参照します。
3	$index このプロパティには、foreachループ内の配列の現在のアイテムのインデックスが含まれています。$ indexの値は、基になるObservable配列が更新されると、自動的に変更されます。明らかに、このコンテキストは次の場合にのみ使用できます。foreach バインディング。
4	$parent このプロパティは、親のViewModelオブジェクトを参照します。これは、ネストされたループの内側から外部のViewModelプロパティにアクセスする場合に役立ちます。
5	$parentContext 親レベルでバインドされているコンテキストオブジェクトが呼び出されます $parentContext。これはとは異なります$parent。$ parentはデータを参照します。一方、$ parentContextはバインディングコンテキストを指します。たとえば、内部コンテキストから外部foreachアイテムのインデックスにアクセスする必要がある場合があります。
6	$rawdata このコンテキストは、現在の状況で生のViewModel値を保持します。これは$ dataに似ていますが、違いは、ViewModelがObservableでラップされている場合、$ dataはラップされていないだけになることです。ViewModelと$ rawdataは、実際のObservableデータになります。
7	$component このコンテキストは、特定のコンポーネント内にいるときに、そのコンポーネントのViewModelを参照するために使用されます。たとえば、コンポーネントのテンプレートセクションにある現在のデータではなく、ViewModelからいくつかのプロパティにアクセスしたい場合があります。
8	$componentTemplateNodes これは、特定のコンポーネントテンプレート内にいるときに、その特定のコンポーネントに渡されるDOMノードの配列を表します。

以下の用語もバインディングで使用できますが、実際にはバインディングのコンテキストではありません。

$context −これは既存のバインディングコンテキストオブジェクトに他なりません。
$element −このオブジェクトは、現在のバインディングのDOM内の要素を参照します。

テキストと外観の操作

以下は、テキストと視覚的な外観を処理するためにKOが提供するバインディングタイプのリストです。

シニア番号	製本の種類と使用法
1	表示：<バインディング条件> 特定の条件に応じてHTMLDOM要素を表示または非表示にします。
2	テキスト：<バインディング値> HTMLDOM要素のコンテンツを設定します。
3	html： DOM要素のHTMLマークアップコンテンツを設定します。
4	css：<バインディングオブジェクト> CSSクラスを要素に適用します。
5	スタイル：<バインディングオブジェクト> 要素のインラインスタイル属性を定義します。
6	attr：<バインディングオブジェクト> 要素に属性を動的に追加します。

制御フローバインディングの操作

以下は、KOが提供する制御フローバインディングタイプのリストです。

シニア番号	製本の種類と使用法
1	foreach：このバインディングでは、各配列項目はループ内のHTMLマークアップで参照されます。
2	if：<バインディング条件> 条件がtrueの場合、指定されたHTMLマークアップが処理されます。それ以外の場合は、DOMから削除されます。
3	ifnot：<バインディング条件> Ifの否定。条件がtrueの場合、指定されたHTMLマークアップが処理されます。それ以外の場合は、DOMから削除されます。
4	と：このバインディングは、指定されたオブジェクトのコンテキストでオブジェクトの子要素をバインドするために使用されます。
5	コンポーネント：<コンポーネント名>またはコンポーネント：<コンポーネントオブジェクト> このバインディングは、コンポーネントをDOM要素に挿入し、オプションでパラメーターを渡すために使用されます。

フォームフィールドバインディングの操作

以下は、KOが提供するフォームフィールドバインディングタイプのリストです。

シニア番号	製本の種類と使用法
1	クリック：<バインディング関数> このバインディングは、クリックに基づいてDOM要素に関連付けられたJavaScript関数を呼び出すために使用されます。
2	イベント：このバインディングは、指定されたDOMイベントをリッスンし、それらに基づいて関連するハンドラー関数を呼び出すために使用されます。
3	送信：<バインディング関数> このバインディングは、関連付けられたDOM要素が送信されたときにJavaScript関数を呼び出すために使用されます。
4	enable：このバインディングは、指定された条件に基づいて特定のDOM要素を有効にするために使用されます。
5	無効化：<バインディング値> このバインディングは、パラメーターがtrueと評価されたときに、関連付けられたDOM要素を無効にします。
6	値：<バインディング値> このバインディングは、それぞれのDOM要素の値をViewModelプロパティにリンクするために使用されます。
7	textInput：<バインディング値> このバインディングは、テキストボックスまたはtextareaとViewModelプロパティの間に双方向バインディングを作成するために使用されます。
8	hasFocus：<バインディング値> このバインディングは、ViewModelプロパティを介してHTMLDOM要素のフォーカスを手動で設定するために使用されます。
9	チェック済み：このバインディングは、チェック可能なフォーム要素とViewModelプロパティの間にリンクを作成するために使用されます。
10	オプション：このバインディングは、select要素のオプションを定義するために使用されます。
11	selectedOptions：このバインディングは、マルチリスト選択フォームコントロールで現在選択されている要素を操作するために使用されます。
12	uniqueName：このバインディングは、DOM要素の一意の名前を生成するために使用されます。