Knockoutjs-quick-guide

提供：Dev Guides
移動先:案内、検索

KnockoutJS-概要

KnockoutJSは基本的に、開発者がリッチでレスポンシブなWebサイトを構築するのに役立つMVVMパターンに基づくJavaScriptで記述されたライブラリです。 モデルは、アプリケーションのモデル（保存されたデータ）、ビュー（UI）、およびビューモデル（モデルのJavaScript表現）を分離します。

KnockoutJSは、2010年7月5日にMicrosoftの従業員であるSteve Sandersonによって開発され、オープンソースプロジェクトとして維持されています。 KOはKnockoutJSに使用される略語です。 KOは、すべてのメインストリームブラウザー（IE 6以降、Firefox 3.5以降、Chrome、Opera、Safari（デスクトップ/モバイル））をサポートしています。

KnockoutJSの機能

ここにKnockoutJSの最も顕著な特徴のいくつかのリストがあります-

  • 宣言型バインディング-HTML DOM要素は、非常に単純な構文を使用してdata-bind属性を介してモデルに接続されます。 この機能を使用すると、簡単に応答性を実現できます。
  • 自動UI更新-モデルデータを表示するために行われた変更は、UIに自動的に反映され、その逆も同様です。 追加のコードを書く必要はありません。
  • 依存関係の追跡-KO属性とKOライブラリ関数/コンポーネント間の関係は透過的です。 KO属性のデータ変更を自動的に追跡し、それぞれの影響を受ける領域を更新します。
  • Templating -テンプレートは、ビューモデルデータの機能として、ブロックを繰り返したり入れ子にしたりできる、複雑なUI構造を構築するためのシンプルで便利な方法です。
  • 拡張可能-カスタム動作を非常に簡単に拡張します。

KnockoutJSを使用する理由

  • KnockoutJSライブラリは、複雑なデータ駆動型インターフェイスを処理する簡単でクリーンな方法を提供します。 Javascriptオブジェクトの自己更新UIを作成できます。
  • これは純粋なJavaScriptライブラリであり、あらゆるWebフレームワークで動作します。 これはJQueryの代替ではありませんが、スマート機能を提供する補足として機能します。
  • KnockoutJSライブラリファイルは非常に小さくて軽量です。
  • KnockoutJSは他のフレームワークから独立しています。 他のクライアントまたはサーバー側の技術と互換性があります。
  • すべてのKnockoutJSの中で最も重要なのはオープンソースであり、したがって無料で使用できます。
  • KnockoutJSは完全に文書化されています。 公式サイトには、APIドキュメント、ライブサンプル、インタラクティブチュートリアルを含む完全なドキュメントがあります。

KnockoutJS-環境設定

KnockoutJSの使用は非常に簡単です。 HTMLページで<script>タグを使用してJavaScriptファイルを参照するだけです。

Knockout.jsは次の方法でアクセスできます-

  • Knockout.jsの製品ビルドは、http：//knockoutjs.com/downloads/[公式Webサイト]からダウンロードできます。 +次の画像のようなページが表示されます。 ダウンロードリンクをクリックすると、最新のknockout.jsファイルが取得されます。

Knockoutjs Setup

次のコードに示すように、ファイルを参照します。 

<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>

src属性を更新して、ダウンロードしたファイルが保存されている場所に一致させます。

あなたはCDNからKnockoutJSライブラリを参照することができます-

  • 次のようにコードでhttps://www.asp.net/ajax/cdn[Microsoft Ajax CDN]からKnockoutJSライブラリを参照できます-
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
   type = "text/javascript"></script>
  • または、次のようにhttps://cdnjs.com/[CDNJS]からKnockoutJSライブラリの縮小版を参照できます-
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
   type = "text/javascript"></script>

注-このチュートリアルのすべての章で、KnockoutJSライブラリのCDNバージョンを参照しています。

例

KnockoutJSは、Model-View-ViewModel（MVVM）パターンに基づいています。 このパターンについては、章のリンク：/knockoutjs/knockoutjs_mvvm_framework [KnockoutJS-MVVM Framework]で詳しく調べます。 まず、KnockoutJSの簡単な例を見てみましょう。 

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Simple 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>First String: <input data-bind = "value: firstString"/></p>
      <p>Second String: <input data-bind = "value: secondString"/></p>

      <p>First String: <strong data-bind = "text: firstString">Hi</strong></p>
      <p>Second String: <strong data-bind = "text: secondString">There</strong></p>

      <p>Derived String: <strong data-bind = "text: thirdString"></strong></p>

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

         function AppViewModel() {
            this.firstString = ko.observable("Enter First String");
            this.secondString = ko.observable("Enter Second String");

            this.thirdString = ko.computed(function() {
               return this.firstString() + " " + this.secondString();
            }, this);
         }

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

   </body>
</html>

次の行はKnockoutJSライブラリを参照しています。 

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
   type = "text/javascript"> </script>

この行はKnockoutJSライブラリを参照しています。

2つの入力ボックスがあります：最初の文字列*と 2番目の文字列*。 これらの2つの変数は、ViewModelでそれぞれEnter StringとEnter Second Stringの値で初期化されます。 

<p>First String: < input data-bind = "value: firstString"/> &lt/p>

これは、bodyセクションで 'data-bind' 属性を使用してViewModelからHTML要素に値をバインドする方法です。

ここで、「firstString」はViewModel変数を指します。 

this.firstString = ko.observable("Enter First String");
*ko.observable* は、基になるViewModelデータを更新できるように、値の変更を監視する概念です。

これをよりよく理解するために、最初の入力ボックスを「Hello」に、2番目の入力ボックスを「finddevguides」に更新してみましょう。 値が同時に更新されるのがわかります。 この概念については、リンク：/knockoutjs/knockoutjs_observables [KnockoutJS-Observables]の章で詳しく説明します。 

this.thirdString = ko.computed(function() {
   return this.firstString() + " " + this.secondString();
}, this);

次に、viewmodelで関数を計算しました。 この関数は、前述の2つの文字列に基づいて3番目の文字列を導出します。 したがって、これらの文字列に対して行われた更新は、この派生文字列に自動的に反映されます。 これを達成するために追加のコードを記述する必要はありません。 これはほんの簡単な例です。 この概念については、link：/knockoutjs/knockoutjs_computed_observables [KnockoutJS-Computed Observables]の章で説明します。

出力

上記のコードを my_first_knockoutjs_programl として保存します。 ブラウザでこのファイルを開くと、次のような出力が表示されます。

最初の例

文字列を「Hello」と「finddevguides」に変更すると、出力が次のように変更されます。

Hello finddevguidesの例

KnockoutJS-アプリケーション

KnockoutJSは、シングルページアプリケーションで広く使用されています。1ページのロードで必要なすべてのデータを動的に取得して、サーバーの往復を削減する機能を備えたWebサイトです。

KnockoutJSは、クライアント側のフレームワークです。 これは、HTMLをドメインデータに簡単にバインドできるJavaScriptライブラリです。 Model-View-ViewModel（MVVM）と呼ばれるパターンを実装します。 ObservablesはKnockoutJSの魔法の要素です。 Observable属性のため、すべてのデータは同期されたままです。

建築

KnockoutJSアーキテクチャ

View

ビューは、HTML要素とCSSスタイルを使用して作成されたユーザーインターフェイスに他なりません。

KnockoutJSを使用して、HTML DOM要素をデータモデルにバインドできます。 「データバインド」の概念を使用して、ViewとViewModel間の双方向のデータバインディングを提供します。つまり、UIで行われた更新はデータモデルに反映され、データモデルで行われた変更はUIに反映されます。 knockoutJSを使用して、自己更新UIを作成できます。

ViewModel

ViewModelは、データを表すために必要なプロパティと関数を含むJavaScriptオブジェクトです。 ViewとViewModelは、HTMLで使用される宣言的なデータバインドコンセプトで接続されています。 これにより、ViewModelを変更せずにHTMLを簡単に変更できます。 KnockoutJSは、Observablesを使用して、それらの間の自動データ更新を処理します。

データの同期は、DOM要素をデータモデルにバインドし、最初にデータバインドを使用してから、Observablesを使用してこれら2つのコンポーネントを更新することで実現されます。 このデータの同期により、依存関係の追跡が自動的に行われます。 それを達成するために追加のコーディングは必要ありません。 KnockoutJSを使用すると、ディスプレイと基になるデータの間に直接接続を作成できます。

アプリケーション固有の動作のカスタムバインディングと呼ばれる独自のバインディングを作成できます。 このようにして、Knockoutは、データをHTMLに変換する方法を直接制御します。

モデル

モデルはサーバー上のドメインデータであり、ViewModelから要求が送受信されるときに操作されます。

データは、データベース、Cookie、またはその他の永続ストレージに保存できます。 KnockoutJSは、保存方法について心配しません。 保存されたデータとKnockoutJSの間で通信するのはプログラマー次第です。

ほとんどの場合、データはAjax呼び出しを介して保存およびロードされます。

KnockoutJS-MVVMフレームワーク

  • Model-View-ViewModel（MVVM）*は、ソフトウェアアプリケーションを開発するためのアーキテクチャ設計パターンです。 MVVMは、2005年にMicrosoft ArchitectのJohn Gossmanによって開発されました。 このパターンは、Model-View-Controller（MVC）パターンから派生しています。 MVVMの利点は、アプリケーションレイヤーのグラフィカルユーザーインターフェイスをビジネスロジックから分離することです。 MVVMは、基になるモデルのデータを非常に簡単に表現および管理できるように処理します。 MVVMのViewModelは、Viewの状態とアクションの抽象バージョンを表します。

ビュークラスは、ModelクラスとViewModelクラスが存在することを知りません。また、ModelとViewModelは、ビューが存在することを知りません。 モデルは、ViewModelとViewが存在することも認識しません。

建築

MVVMアーキテクチャ

View

ビューは、データを表すためにマークアップ言語を使用して作成されたグラフィカルユーザーインターフェイスです。 ビューは、データバインドの概念を介してViewModelのプロパティにバインドし、モデルデータに間接的に接続します。 ViewModelで行われた変更のために、ビューを変更する必要はありません。 ViewModelのデータに加えられた変更は、バインディングによりViewに自動的に伝播されます。

モデル

モデルは、リアルタイムデータを保持するドメインデータまたはビジネスオブジェクトです。 モデルには動作がありません。 動作は主にビジネスロジックで実装されます。

ViewModel

ViewModelは、ModelとViewの表示ロジックからのデータが一緒にバンドルされる中心的な場所です。 ViewModelは、データの動的な状態を保持します。 相互に通信するために、ViewとViewModelの間に暗黙的なバインダーがあります。 このバインディングには、宣言データとコマンドバインディングが含まれます。 このバインディングにより、ViewとViewModelの同期が実現されます。 Viewで行われた変更はすべてViewModelに反映され、同様にViewModelでの変更はすべて自動的にViewに反映されます。 この2ウェイバインディングメカニズムの存在は、このMVVMパターンの重要な側面です。

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-計算されたオブザーバブル

Computed Observableは、1つ以上のObservableに依存する関数であり、基礎となるObservable（依存関係）が変更されるたびに自動的に更新されます。

計算されたオブザーバブルは連鎖できます。

構文

this.varName = ko.computed(function(){
   ...
   ...// function code
   ...
},this);

例

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

<!DOCTYPE html>
   <head >
      <title>KnockoutJS Computed Observables</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
   </head>

   <body>
      <p>Enter first number: <input data-bind = "value: a"/></p>
      <p>Enter second number: <input data-bind = "value: b"/></p>
      <p>Average := <span data-bind="text: totalAvg"></span></p>

      <script>
         function MyViewModel() {
            this.a = ko.observable(10);
            this.b = ko.observable(40);

            this.totalAvg = ko.computed(function() {

               if(typeof(this.a()) !== "number" || typeof(this.b()) !== "number") {
                  this.a(Number(this.a()));  //convert string to Number
                  this.b(Number(this.b()));  //convert string to Number
               }

               total = (this.a() + this.b())/2 ;
               return total;
            },this);
         }

         ko.applyBindings(new MyViewModel());
      </script>

   </body>
</html>

次の行の最初の2つは、入力値を受け入れるためのものです。 3行目は、これら2つの数値の平均を出力します。 

<p>Enter first number: <input data-bind = "value: a"/></p>
<p>Enter second number: <input data-bind = "value: b"/></p>
<p>Average := <span data-bind = "text: totalAvg"></span></p>

次の行で、Observables a および b のタイプは、ViewModel内で初めて初期化されたときの数値です。 ただし、KOでは、UIから受け入れられるすべての入力はデフォルトで文字列形式です。 したがって、算術演算を実行するには、それらをNumberに変換する必要があります。 

this.totalAvg = ko.computed(function() {

   if(typeof(this.a()) !== "number" || typeof(this.b()) !== "number") {
      this.a(Number(this.a()));  //convert string to Number
      this.b(Number(this.b()));  //convert string to Number
   }

   total = (this.a() + this.b())/2 ;
   return total;
},this);

次の行では、計算された平均がUIに表示されます。 totalAvgのデータバインドタイプは単なるテキストであることに注意してください。 

<p>Average := <span data-bind = "text: totalAvg"></span></p>

出力

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

  • 上記のコードを computed-observable ファイルに保存します。
  • このHTMLファイルをブラウザーで開きます。
  • テキストボックスに2つの数値を入力し、平均が計算されることを確認します。

「これ」の管理

上記の例では、2番目のパラメーターが計算関数に this として提供されていることに注意してください。 this を指定せずにObservables * a（）および b（）*を参照することはできません。

これを克服するために、 this の参照を保持する self 変数が使用されます。 そうすることで、コード全体で this を追跡する必要がなくなります。 代わりに、 self を使用できます。

次のViewModelコードは、selfを使用して上記の例のために書き直されます。 

function MyViewModel(){
   self = this;
   self.a = ko.observable(10);
   self.b = ko.observable(40);

   this.totalAvg = ko.computed(function() {

      if(typeof(self.a()) !== "number" || typeof(self.b()) !== "number") {
         self.a(Number(self.a()));  //convert string to Number
         self.b(Number(self.b()));  //convert string to Number
      }

      total = (self.a() + self.b())/2 ;
      return total;
   });
}

純粋な計算された観測可能量

Computed Observableが値を計算して返すだけで、他のオブジェクトや状態を直接変更しない場合、Computed Observableは Pure Computed Observableとして宣言する必要があります。 Pure Computed Observablesは、Knockoutが再評価とメモリ使用を効率的に管理するのに役立ちます。

サブスクライバーへの明示的な通知

Computed Observableがプリミティブデータ型の値（String、Boolean、Null、およびNumber）を返している場合、実際の値が変更された場合にのみ、サブスクライバーに通知されます。 Observableが以前の値と同じ値を受け取った場合、そのサブスクライバーには通知されません。

次のように notify 構文を使用することにより、新しい値が古い値と同じであっても、計算オブザーバブルを常に明示的にオブザーバーに通知することができます。 

myViewModel.property = ko.pureComputed(function() {
   return ...;   //code logic goes here
}).extend({ notify: 'always' });

変更通知の制限

高価な更新が多すぎると、パフォーマンスの問題が発生する可能性があります。 次のように rateLimit 属性を使用して、Observableから受信する通知の数を制限できます。 

//make sure there are updates no more than once per 100-millisecond period
myViewModel.property.extend({ rateLimit: 100 });

プロパティが計算可能かどうかを調べる

特定の状況では、プロパティが計算された観測可能かどうかを調べることが必要になる場合があります。 以下の関数を使用して、Observableのタイプを識別できます。

Sr.No. Function
1

ko.isComputed

プロパティがComputed Observableの場合、 true を返します。

2

ko.isObservable

プロパティがObservable、Observable array、またはComputed Observableの場合、 true を返します。

3

ko.isWritableObservable

Observable、Observable array、またはWritable Computed Observableの場合、 true を返します。 （これはko.isWriteableObservableとも呼ばれます）

書き込み可能な計算されたオブザーバブル

Computed Observableは、1つまたは複数の他のObservableから派生しているため、読み取り専用です。 ただし、Computed Observableを書き込み可能にすることは可能です。 このためには、書き込まれた値で機能するコールバック関数を提供する必要があります。

これらの書き込み可能なComputed Observableは、通常のObservableと同じように機能します。 さらに、干渉する読み取りおよび書き込みアクションのためにカスタムロジックを構築する必要があります。

次のようなチェーン構文を使用して、多くのObservablesまたはComputed Observableプロパティに値を割り当てることができます。 

myViewModel.fullName('Tom Smith').age(45)

例

次の例は、Writable Computable Observableの使用方法を示しています。 

<!DOCTYPE html>
   <head >
      <title>KnockoutJS Writable Computed Observable</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
   </head>

   <body>
      <p>Enter your birth Date: <input type = "date" data-bind = "value: rawDate" ></p>
      <p><span data-bind = "text: yourAge"></span></p>

      <script>
         function MyViewModel() {
            this.yourAge = ko.observable();
            today = new Date();
            rawDate = ko.observable();

            this.rawDate = ko.pureComputed ({

               read: function() {
                  return this.yourAge;
               },

               write: function(value) {
                  var b = Date.parse(value);   //convert birth date into milliseconds
                  var t = Date.parse(today);   //convert todays date into milliseconds
                  diff = t - b;                //take difference
                  var y = Math.floor(diff/31449600000);    //difference is converted
                                                           //into years. 31449600000
                                                           //milliseconds form a year.

                  var m = Math.floor((diff % 31449600000)/604800000/4.3); //calculating
                                                                          //months.
                                                                          //604800000
                                                                          //milliseconds
                                                                          //form a week.

                  this.yourAge("You are " + y + " year(s) " + m +" months old.");
               },
               owner: this
            });
         }

         ko.applyBindings(new MyViewModel());
      </script>

   </body>
</html>

上記のコードでは、 rawDate はUIから受け入れられるpureComputedプロパティです。 yourAge Observableは rawDate から派生しています。

JavaScriptの日付はミリ秒単位で操作されます。 したがって、両方の日付（今日の日付と生年月日）がミリ秒に変換され、それらの差が年と月に変換されます。

出力

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

  • 上記のコードを writable_computed_observable ファイルに保存します。
  • このHTMLファイルをブラウザーで開きます。
  • 生年月日を入力し、年齢が計算されることを確認します。

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-dependency-tracking Knockoutjs-templating

KnockoutJS-コンポーネント

コンポーネントは、大規模なアプリケーションを構築し、コードの再利用性を促進するためのUIコードを編成するための巨大な方法です。

他のコンポーネントから継承またはネストされています。 ロードおよび構成については、独自の規則またはロジックを定義します。

アプリケーションまたはプロジェクト全体で再利用できるようにパッケージ化されています。 アプリケーションの完全なセクションまたは小さなコントロール/ウィジェットを表します。 オンデマンドでロードまたはプリロードできます。

コンポーネント登録

コンポーネントは、* ko.components.register（）* APIを使用して登録できます。 KOのコンポーネントをロードして表現するのに役立ちます。 登録には、構成のあるコンポーネント名が必要です。 構成は、viewModelとテンプレートを決定する方法を指定します。

構文

コンポーネントは次のように登録できます- 

ko.components.register('component-name', {
   viewModel: {...},   //function code
   template: {....)//function code
});
  • component-name には、空でない任意の文字列を指定できます。
  • viewModel はオプションであり、次のセクションにリストされているviewModel形式を使用できます。
  • template は必須であり、次のセクションにリストされているテンプレート形式を使用できます。

ViewModelの記述

次の表に、コンポーネントの登録に使用できるviewModel形式を示します。

Sr.No. viewModel Forms & Description
1

constructor function

コンポーネントごとに個別のviewModelオブジェクトを作成します。 オブジェクトまたは関数は、コンポーネントビューでバインドするために使用されます。 

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register('component name', {
   viewModel: SomeComponentViewModel,
   template: ...
});
2

shared object instance

viewModelオブジェクトインスタンスは共有されます。 インスタンスプロパティは、オブジェクトを直接使用するために渡されます。 

var sharedViewModelInstance = { ... };

ko.components.register('component name', {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});
3

createViewModel

ファクトリとして機能し、オブジェクトを返すことができるビューモデルとして使用できる関数を呼び出します。 

ko.components.register('component name', {
   viewModel: {
      createViewModel: function (params, componentInfo) {
         ...      //function code
         ...
      }
   },
   template: ....
});
4

AMD module

これは、モジュールと依存関係の両方が非同期にロードされるモジュールを定義するためのモジュール形式です。 

ko.components.register('component name', {
   viewModel: { require: 'some/module/name' },
   template: ...
});

define(['knockout'], function(ko) {
   function MyViewModel() {
     //...
   }

   return MyViewModel;
});

テンプレートの記述

次の表に、コンポーネントの登録に使用できるテンプレート形式を示します。

Sr.No. Template Forms
1

element ID 

ko.components.register('component name', {
   template: { element: 'component-template' },
   viewModel: ...
});
2

element instance 

var elemInstance = document.getElementById('component-template');

ko.components.register('component name', {
   template: { element: elemInstance },
   viewModel: ...
});
3

string of markup 

ko.components.register('component name', {
   template: '<input data-bind = "value: yourName"/>\
      <button data-bind = "click: addEmp">Add Emp </button>',
   viewModel: ...
});
4

DOM nodes 

var emp = [
   document.getElementById('node 1'),
   document.getElementById('node 2'),
];

ko.components.register('component name', {
   template: emp,
   viewModel: ...
});
5

document fragement 

ko.components.register('component name', {
   template: someDocumentFragmentInstance,
   viewModel: ...
});
6

AMD module 

ko.components.register('component name', {
   template: { require: 'some/template' },
   viewModel: ...
});

単一のAMDモジュールとして登録されたコンポーネント

AMDモジュールは、viewModel/templateのペアを使用せずに、コンポーネントを単独で登録できます。 

ko.components.register('component name',{ require: 'some/module'});

コンポーネントのバインド

コンポーネントのバインドには2つの方法があります。

  • 完全な構文-パラメータとオブジェクトをコンポーネントに渡します。 次のプロパティを使用して渡すことができます。
  • name -コンポーネント名を追加します。
  • params -コンポーネントのオブジェクトに複数のパラメーターを渡すことができます。
<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>
  • 短縮構文-文字列をコンポーネント名として渡しますが、パラメータは含まれません。
<div data-bind = 'component: "component name"'></div>
  • テンプレートのみのコンポーネント-コンポーネントは、viewModelを指定せずにテンプレートのみを定義できます。
ko.components.register('component name', {
   template:'<input data-bind = "value: someName"/>,
});
  • コンテナ要素なしでコンポーネントを使用する-追加のコンテナ要素を使用せずにコンポーネントを使用できます。 これは、コメントタグと同様の*コンテナレスフロー*コントロールを使用して実行できます。
<!--ko.component: ""-->
<!--/ko-->

カスタム要素

カスタム要素は、コンポーネントをレンダリングする方法です。 ここでは、プレースホルダーを定義する代わりに、自己記述的なマークアップ要素名を直接記述できます。プレースホルダーは、コンポーネントをバインドする場所です。 

<products-list params = "name: userName, type: userType"></products-list>

パラメータを渡す

*params* 属性は、パラメーターをコンポーネントviewModelに渡すために使用されます。 data-bind属性に似ています。 params属性の内容は、JavaScriptオブジェクトリテラルのように（データバインド属性のように）解釈されるため、任意のタイプの任意の値を渡すことができます。 それは次の方法でパラメータを渡すことができます-
  • 親コンポーネントと子コンポーネント間の通信-コンポーネントはそれ自体ではインスタンス化されないため、viewmodelプロパティはコンポーネントの外部から参照されるため、子コンポーネントのviewmodelによって受信されます。 たとえば、次の構文では、 ModelValue が親viewmodelであり、子viewModelコンストラクター ModelProperty によって受信されることがわかります。
  • 観測可能な式を渡す-paramsパラメーターに3つの値があります。
  • simpleExpression -それは数値です。 オブザーバブルは含まれません。
  • simpleObservable -親viewModelで定義されているインスタンスです。 親viewModelは、子viewModelによって行われたobservableの変更を自動的に取得します。
  • observableExpression -式がそれ自体で評価される場合、式はオブザーバブルを読み取ります。 観測可能な値が変化すると、式の結果も時間とともに変化する可能性があります。

次のようにパラメータを渡すことができます- 

<some-component
   params = 'simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1'>
</some-component>

私たちは次のようにviewModelのパラメータを渡すことができます- 

<some-component
   params = 'objectValue:{a: 3, b: 2},
      dateValue: new date(),
      stringValue: "Hi",
      numericValue:123,
      boolValue: true/false,
      ModelProperty: ModelValue'>
</some-component>

コンポーネントにマークアップを渡す

受信したマークアップはコンポーネントの作成に使用され、出力の一部として選択されます。 次のノードは、コンポーネントテンプレートの出力の一部として渡されます。 

template: { nodes: $componentTemplateNodes }

カスタム要素タグ名の制御

*ko.components.register* を使用してコンポーネントに登録する名前。同じ名前はカスタム要素タグ名に対応します。 *getComponentNameForNode* を使用して制御するようにオーバーライドすることにより、カスタム要素タグ名を変更できます。
ko.components.getComponentNameForNode = function(node) {
   ...
   ...  //function code
   ...
}

カスタム要素の登録

デフォルトのコンポーネントローダーが使用されているため、コンポーネントが ko.components.register を使用して登録されている場合、カスタム要素はすぐに使用可能にできます。 ko.components.register を使用せず、カスタムコンポーネントローダーを実装していない場合は、任意の要素名を定義することでカスタム要素を使用できます。 ko.components.register を使用している場合、カスタムコンポーネントローダーは構成を使用しないため、構成を指定する必要はありません。 

ko.components.register('custom-element', { ......... });

例 

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Components</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
   </head>

   <body>
      <!--params attribute is used to pass the parameter to component viewModel.-->
      <click params = "a: a, b: b"></click>

      <!--template is used for a component by specifying its ID -->
      <template id = "click-l">
         <div data-bind = "text: a"></div>

         <!--Use data-bind attribute to bind click:function() to ViewModel. -->
         <button data-bind = "click:function(){callback(1)}">Increase</button>
         <button data-bind = "click:function(){callback(-1)}">Decrease</button>
      </template>

      <script>
        //Here components are registered
         ko.components.register('click', {

            viewModel: function(params) {
               self = this;
               this.a = params.a;
               this.b = params.b;

               this.callback = function(num) {
                  self.b(parseInt(num));
                  self.a( self.a() + parseInt(num) );
               };
            },
            template: { element: 'click-l' }
         });

        //keeps an eye on variable for any modification in data
         function viewModel() {
            this.a = ko.observable(2);
            this.b = ko.observable(0);
         }

         ko.applyBindings(new viewModel() );
      </script>

   </body>
</html>

出力

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

  • 上記のコードを component_register ファイルに保存します。 *このHTMLファイルをブラウザーで開きます。

コンポーネントローダー

コンポーネントローダーは、指定されたコンポーネント名に対してテンプレート/viewModelのペアを非同期的に渡すために使用されます。

デフォルトのコンポーネントローダー

デフォルトのコンポーネントローダーは、明示的に登録された構成に依存します。 各コンポーネントは、コンポーネントを使用する前に登録されます。 

ko.components.defaultLoader

コンポーネントローダーユーティリティ関数

デフォルトのコンポーネントローダーは、次の関数を使用して読み書きできます。

Sr.No. Utility functions & Description
1
  • ko.components.register(name, configuration)*

コンポーネントが登録されています。

2

ko.components.isRegistered(name)

特定のコンポーネント名がすでに登録されている場合、trueまたはfalseとして返されます。

3

ko.components.unregister(name)

コンポーネント名がレジストリから削除されます。

4

ko.components.get(name, callback)

この関数は、登録された各ローダーに順番にアクセスして、コンポーネント名のviewModel/template定義を最初に渡した人を見つけます。 次に、 callback を呼び出してviewModel/template宣言を返します。 登録されたローダーがコンポーネントに関する情報を見つけられなかった場合、* callback（null）*を呼び出します。

5

ko.components.clearCachedDefinition(name)

この関数は、指定されたコンポーネントキャッシュエントリをクリアするときに呼び出すことができます。 次回コンポーネントが必要な場合は、再度ローダーに相談します。

カスタムコンポーネントローダーの実装

カスタムコンポーネントローダーは、次の方法で実装することができます-

  • * getConfig（name、callback）*-名前に応じて、プログラムで構成を渡すことができます。 callback（componentConfig）を呼び出して構成を渡すことができます。ここで、loadComponentまたはその他のローダーがコンポーネントcomponentConfigを使用できます。
  • * loadComponent（name、componentConfig、callback）*-この関数は、設定方法に応じて、configのviewModelとテンプレート部分を解決します。 callback（result）を呼び出して、viewmodel/templateのペアを渡すことができます。オブジェクトの結果は、次のプロパティによって定義されます。
  • テンプレート-必須。 DOMノードの配列を返します。
  • * createViewModel（params、componentInfo）*-オプション。 viewModelプロパティの設定方法に応じて、viewModelオブジェクトを返します。
  • * loadTemplate（name、templateConfig、callback）*-DOMノードは、カスタムロジックを使用してテンプレートに渡されます。 オブジェクトtemplateConfigは、オブジェクトcomponentConfigのテンプレートのプロパティです。 callback（domNodeArray）は、DOMノードの配列を渡すために呼び出されます。
  • * loadViewModel（name、templateConfig、callback）*-viewModelファクトリは、カスタムロジックを使用してviewModel構成で渡されます。

KnockoutJS-便利なリソース

次のリソースには、KnockoutJSに関する追加情報が含まれています。 これについての詳細な知識を得るためにそれらを使用してください。

KnockoutJSの便利なリンク

KnockoutJSに関する便利な本

このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。

「https://www.finddevguides.com/index.php?title=Knockoutjs-quick-guide&oldid=79071」から取得
Powered by MediaWiki