KnockoutJS-オブザーバブル

KnockoutJSは、次の3つの重要な概念に基づいて構築されています。

オブザーバブルとそれらの間の依存関係の追跡-DOM要素は「data-bind」を介してViewModelに接続されます。彼らはObservablesを通じて情報を交換します。これにより、依存関係の追跡が自動的に処理されます。
UIとViewModel間の宣言型バインディング-DOM要素は「data-bind」の概念を介してViewModelに接続されます。
再利用可能なコンポーネントを作成するためのテンプレート作成-テンプレート作成は、複雑なWebアプリケーションを作成するための堅牢な方法を提供します。

この章では、オブザーバブルについて学習します。

名前が示すように、ViewModelデータ/プロパティをObservableとして宣言すると、毎回のデータ変更は、データが使用されるすべての場所に自動的に反映されます。これには、関連する依存関係の更新も含まれます。KOがこれらの処理を行い、これを実現するために追加のコードを記述する必要はありません。

Observableを使用すると、UIとViewModelを動的に通信させることが非常に簡単になります。

構文

関数でViewModelプロパティを宣言する必要があります ko.observable() それを観察可能にするために。

this.property = ko.observable('value');

例

Observableの使用法を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

次の行は入力ボックス用です。ご覧のとおり、data-bind属性を使用してyourName値をViewModelにバインドしました。

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

次の行は、yourNameの値を出力するだけです。ここでは、値を読み取るだけなので、データバインドタイプがテキストであることに注意してください。

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

次の行で、ko.observableは、データの変更についてyourName変数を監視します。変更があると、対応する場所も変更された値で更新されます。次のコードを実行すると、入力ボックスが表示されます。その入力ボックスを更新すると、新しい値は、使用されている場所に反映または更新されます。

this.yourName = ko.observable("");

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードをに保存します first_observable_pgm.htm ファイル。
このHTMLファイルをブラウザで開きます。
名前をScottとして入力し、名前が出力に反映されていることを確認します。

データの変更は、UIまたはViewModelのいずれかから行うことができます。データがどこから変更されたかに関係なく、UIとViewModelはそれらの間で同期を維持します。これにより、双方向のバインディングメカニズムになります。上記の例では、入力ボックスで名前を変更すると、ViewModelは新しい値を取得します。ViewModel内からyourNameプロパティを変更すると、UIは新しい値を受け取ります。

オブザーバブルの読み取りと書き込み

次の表に、Observablesで実行できる読み取りおよび書き込み操作を示します。

シニア番号	読み取り/書き込み操作と構文
1	Read 値を読み取るには、次のようなパラメーターを指定せずにObservableプロパティを呼び出すだけです。AppViewModel.yourName（）;
2	Write Observableプロパティに値を書き込んだり更新したりするには、次のようなパラメーターで目的の値を渡すだけです。AppViewModel.yourName（ 'Bob'）;
3	Write multiple 複数のViewModelプロパティは、次のようなチェーン構文を使用して1行で更新できます。AppViewModel.yourName（ 'Bob'）。yourAge（45）;

観測可能な配列

Observable宣言は、単一のオブジェクトのデータ変更を処理します。ObservableArrayは、オブジェクトのコレクションで機能します。これは、複数のタイプの値を含む複雑なアプリケーションを処理し、ユーザーの操作に基づいてそれらのステータスを頻繁に変更する場合に非常に便利な機能です。

構文

this.arrayName = ko.observableArray();    // It's an empty array

監視可能な配列は、その中のどのオブジェクトが追加または削除されたかのみを追跡します。個々のオブジェクトのプロパティが変更されたかどうかは通知されません。

初めて初期化する

配列を初期化すると同時に、次のように初期値をコンストラクターに渡すことで、配列をObservableとして宣言できます。

this.arrayName = ko.observableArray(['scott','jack']);

ObservableArrayからの読み取り

Observable配列要素には次のようにアクセスできます。

alert('The second element is ' + arrayName()[1]);

ObservableArray関数

KnockoutJSには、独自のObservable配列関数のセットがあります。−

これらの機能はすべてのブラウザで機能します。
これらの関数は、依存関係の追跡を自動的に処理します。
構文は使いやすいです。たとえば、要素を配列に挿入するには、arrayName（）。push（ 'value'）の代わりにarrayName.push（ 'value'）を使用する必要があります。

以下は、さまざまなObservableArrayメソッドのリストです。

シニア番号	方法と説明
1	push（ 'value'）配列の最後に新しいアイテムを挿入します。
2	ポップ（）配列から最後の項目を削除して返します。
3	unshift（ 'value'）配列の先頭に新しい値を挿入します。
4	シフト（）配列から最初の項目を削除して返します。
5	逆行する（）配列の順序を逆にします。
6	ソート（）配列アイテムを昇順で並べ替えます。
7	splice（start-index、end-index） start-indexとend-indexの2つのパラメーターを受け入れ、最初から最後のインデックスから始まる項目を削除して、配列として返します。
8	indexOf（ 'value'）この関数は、指定されたパラメーターの最初の出現のインデックスを返します。
9	スライス（開始インデックス、終了インデックス）このメソッドは、配列の一部をスライスします。start-indexからend-indexまでのアイテムを返します。
10	すべて削除する（）すべてのアイテムを削除し、それらを配列として返します。
11	remove（ 'value'）パラメータに一致するアイテムを削除し、配列として返します。
12	remove（function（item）{condition}）条件を満たすアイテムを削除し、配列として返します。
13	remove（[値のセット]）指定された値のセットに一致するアイテムを削除します。
14	destroyAll() プロパティ_destroyを使用して、配列内のすべてのアイテムを値trueでマークします。
15	destroy('value') パラメータに等しいアイテムを検索し、値がtrueの特別なプロパティ_destroyでマークします。
16	destroy(function(item) { condition}) 条件を満たすすべてのアイテムを検索し、真の値を持つプロパティ_destroyでマークします。
17	destroy([set of values]) 指定された値のセットに一致するアイテムを検索し、それらを真の値を持つ_destroyとしてマークします。

Note − ObservableArraysのDestroyおよびDestroyAll関数は、ほとんどが「RubyonRails」開発者専用です。

destroyメソッドを使用すると、対応するアイテムはその時点では実際には配列から削除されませんが、UIで読み取れないように、プロパティ_destroyでtrue値でマークすることで非表示になります。trueに等しい_destroyとしてマークされたアイテムは、JSONオブジェクトグラフの処理中に後で削除されます。