Knockoutjs-application

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

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呼び出しを介して保存およびロードされます。