KnockoutJS-オブザーバブル

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

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

この章ではオブザーバブルを学習します。

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

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

構文

関数* ko.observable（）*でViewModelプロパティを宣言するだけで、監視可能になります。

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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。 *名前にScottと入力し、名前が出力に反映されていることを確認します。

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

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

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

Sr.No.

Read/Write Operation & Syntax

1

Read*

値を読み取るには、AppViewModel.yourName（）;のようなパラメーターなしでObservableプロパティを呼び出すだけです。

2

Write

Observableプロパティの値を書き込み/更新するには、AppViewModel.yourName（ 'Bob'）;のようなパラメーターに目的の値を渡すだけです。

3

Write multiple

AppViewModel.yourName（ 'Bob'）。yourAge（45）;のようなチェーン構文の助けを借りて、複数のViewModelプロパティを1行で更新できます。

観測可能な配列

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

構文

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

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

初めて初期化する

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

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

観測可能な配列からの読み取り

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

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

ObservableArray関数

KnockoutJSには、独自のObservable配列関数セットがあります。彼らは便利です-

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

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

Sr.No.	Methods & Description
1	push('value') 配列の最後に新しいアイテムを挿入します。
2	pop() 配列から最後のアイテムを削除して返します。
3	unshift('value') 配列の先頭に新しい値を挿入します。
4	shift() 配列から最初のアイテムを削除して返します。
5	reverse() 配列の順序を逆にします。
6	sort() 配列項目を昇順で並べ替えます。
7	splice(start-index,end-index) 2つのパラメーター（start-indexおよびend-index）を受け入れ、startからend indexまでの項目を削除し、配列として返します。
8	indexOf('value') この関数は、指定されたパラメーターの最初の出現のインデックスを返します。
9	slice(start-index,end-index) このメソッドは、配列の一部を切り取ります。 start-indexからend-indexまでのアイテムを返します。
10	removeAll() すべてのアイテムを削除し、それらを配列として返します。
11	remove('value') パラメータに一致するアイテムを削除し、配列として返します。
12	remove(function(item) \{ condition }) 条件を満たすアイテムを削除し、配列として返します。
13	remove([set of values)] 指定された値のセットと一致するアイテムを削除します。
14	destroyAll()* 値がtrueのプロパティ_destroyで配列内のすべてのアイテムをマークします。
15	destroy('value') パラメータに等しいアイテムを検索し、値trueの特別なプロパティ_destroyでマークします。
16	destroy(function(item) \{ condition}) 条件を満たすすべてのアイテムを検索し、プロパティ_destroyでtrue値をマークします。
17	destroy([set of values]) 指定された値のセットに一致するアイテムを検索し、それらを真の値を持つ_destroyとしてマークします。

注意-ObservableArraysのDestroyおよびDestroyAll関数は、主に「Ruby on Rails」開発者専用です。

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

Knockoutjs-observables

目次