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

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

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

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

バインド構文

バインディングは、バインディング name と value の2つの項目で構成されます。以下は簡単な例です-

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

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

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

ここでは、各キーが押された後に値が更新されます。

バインディング値

バインディング値は、単一値、リテラル、変数、または 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以降では、バインディングに未定義の値を与えるバインディング値をスキップできます。

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

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

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

Sr.No.	Binding Context Types & Description
1	$root* これは常に最上位のViewModelを参照します。これにより、ViewModelを操作するための最上位のメソッドにアクセスできます。これは通常、ko.applyBindingsに渡されるオブジェクトです。
2	$data このプロパティは、Javascriptオブジェクトの this キーワードによく似ています。バインディングコンテキストの$ dataプロパティは、現在のコンテキストのViewModelオブジェクトを参照します。
3	$index このプロパティには、foreachループ内の配列の現在のアイテムのインデックスが含まれます。基礎となるObservable配列が更新されると、$ indexの値は自動的に変更されます。明らかに、このコンテキストは foreach バインディングでのみ利用可能です。
4	$parent このプロパティは、親ViewModelオブジェクトを参照します。これは、ネストされたループの内側から外側のViewModelプロパティにアクセスする場合に便利です。
5	$parentContext 親レベルでバインドされているコンテキストオブジェクトは $ parentContext と呼ばれます。これは $ parent とは異なります。 $ parentはデータを参照します。一方、_ $ parentContext_はバインディングコンテキストを指します。 E.g. 内部コンテキストから外部foreachアイテムのインデックスにアクセスする必要がある場合があります。
6	$rawdata このコンテキストには、現在の状況での未加工のViewModel値が保持されます。これは$ dataに似ていますが、違いは、ViewModelがObservableでラップされている場合、$ dataがラップされていないことです。 ViewModelと$ rawdataは、実際の観測可能なデータになります。
7	$component このコンテキストは、特定のコンポーネント内にいるときに、そのコンポーネントのViewModelを参照するために使用されます。 E.g. コンポーネントのテンプレートセクションの現在のデータではなく、ViewModelの一部のプロパティにアクセスしたい場合があります。
8	$componentTemplateNodes これは、特定のコンポーネントテンプレート内にいるときにその特定のコンポーネントに渡されるDOMノードの配列を表します。

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

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

テキストと外観の操作

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

Sr.No.	Binding Type & Usage
1	visible: <binding-condition> 特定の条件に応じてHTML DOM要素を表示または非表示にします。
2	text: <binding-value> HTML DOM要素のコンテンツを設定します。
3	html: <binding-value> DOM要素のHTMLマークアップコンテンツを設定します。
4	css: <binding-object> CSSクラスを要素に適用します。
5	style: <binding-object> 要素のインラインスタイル属性を定義します。
6	attr: <binding-object> 要素に属性を動的に追加します。

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

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

Sr.No.	Binding Type & Usage
1	foreach: <binding-array> このバインディングでは、各配列項目はループ内のHTMLマークアップで参照されます。
2	if: <binding-condition> 条件が真の場合、指定されたHTMLマークアップが処理されます。それ以外の場合は、DOMから削除されます。
3	ifnot: <binding-condition> Ifの否定。条件が真の場合、指定されたHTMLマークアップが処理されます。それ以外の場合は、DOMから削除されます。
4	with: <binding-object> このバインディングは、指定されたオブジェクトのコンテキストでオブジェクトの子要素をバインドするために使用されます。
5	component: <component-name> OR component: <component-object> このバインディングは、DOM要素にコンポーネントを挿入し、オプションでパラメーターを渡すために使用されます。

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

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

Sr.No.	Binding Type & Usage
1	click: <binding-function> このバインディングは、クリックに基づいてDOM要素に関連付けられたJavaScript関数を呼び出すために使用されます。
2	event: <DOM-event: handler-function> このバインディングは、指定されたDOMイベントをリッスンし、それらに基づいて関連するハンドラー関数を呼び出すために使用されます。
3	submit: <binding-function> このバインディングは、関連付けられたDOM要素が送信されたときにJavaScript関数を呼び出すために使用されます。
4	enable: <binding-value> このバインディングは、指定された条件に基づいて特定のDOM要素を有効にするために使用されます。
5	disable: <binding-value> このバインディングは、パラメーターがtrueと評価されたときに、関連付けられたDOM要素を無効にします。
6	value: <binding-value> このバインディングは、それぞれのDOM要素の値をViewModelプロパティにリンクするために使用されます。
7	textInput: <binding-value> このバインディングは、テキストボックスまたはテキストエリアとViewModelプロパティの間に双方向のバインディングを作成するために使用されます。
8	hasFocus: <binding-value> このバインディングは、ViewModelプロパティを介してHTML DOM要素のフォーカスを手動で設定するために使用されます。
9	checked: <binding-value> このバインディングは、チェック可能なフォーム要素とViewModelプロパティ間のリンクを作成するために使用されます。
10	options: <binding-array> このバインディングは、select要素のオプションを定義するために使用されます。
11	selectedOptions: <binding-array> このバインディングは、複数リスト選択フォームコントロールで現在選択されている要素を操作するために使用されます。
12	uniqueName: <binding-value> このバインディングは、DOM要素の一意の名前を生成するために使用されます。

Knockoutjs-declarative-bindings

目次