KnockoutJ の概要-jsチュートリアル-php.cn

Introdução ao KnockoutJs

このコンテンツは基本的にオリジナル資料の翻訳です。目的は、Magento 2 の KnockoutJs について学び、KnockoutJs に関するポルトガル語のコンテンツを作成することです。

ドキュメント

マイクロソフト: MVVM
KnockoutJs: 概要
KnockoutJs: インストール

MVVMパターン

MVVM (Model-View-ViewModel) アーキテクチャは、ユーザーインターフェイスアプリケーションで広く使用されているソフトウェア設計パターンです。 MVVM は、ビジネスロジックをインターフェイスの動作から明確に分離するため、複雑で対話型のユーザーインターフェイスを備えたアプリケーションで特に役立ちます。これにより、コードのメンテナンス、テスト容易性、拡張性が容易になります。

ユーザーが View と対話すると、ViewModel はこれらのアクションをキャプチャし、Model 内の対応するデータを更新します。 Model が更新されると、ViewModel はこれらの変更を受け取り、ユーザーインターフェイスの変更を反映して View を自動的に更新します。 ViewModel は、サーバーにリクエストを送信してデータを取得または送信するなど、特定のアクションを実行することもできます。

モデル: モデル はアプリケーションのデータ層を表します。ビジネスロジック、検証ルール、データの保存と取得を処理します。モデルは通常、アプリケーションドメインに固有のエンティティと機能を表すデータオブジェクトで構成されます。

View: View はアプリケーションのプレゼンテーション層であり、Model データの表示とユーザーとの対話を担当します。これは、ユーザーがデータを視覚化および操作するために対話するグラフィカルインターフェイスを表します。 MVVM アーキテクチャでは、ビュー はビジネスロジックから可能な限り切り離された状態に保たれ、更新と置換が簡単になります。

ViewModel: ViewModel は MVVM パターンの中核部分です。 View と Model の間の仲介者として機能し、それらの間の通信と双方向データバインディングを実行します。 ViewModel にはプレゼンテーションロジックが含まれており、Model からのデータを View での表示に適した形式に変換します。さらに、ViewModel はユーザーイベントと応答を管理し、必要に応じて Model と対話します。

ノックアウトJs

Knockout.js は、動的でリアクティブなユーザーインターフェイスを作成できるオープンソースの JavaScript ライブラリです。これは、複雑で対話型のユーザーインターフェイスを備えた Web アプリケーションを開発する場合に特に役立ちます。 KnockoutJs は MVVM 設計パターン (Model-View-ViewModel) に基づいており、ビジネスロジック (Model) をプレゼンテーション (View) から中間プロセスまで分離します。 ViewModel というレイヤー。他の構造から独立しています。

KnockoutJs は、2010 年 7 月 5 日に Microsoft 社員の Steve Sanderson によってオープンソースプロジェクトとして開発され、維持されています。

KnockoutJs は、IE 6、Firefox 3.5、Chrome、Opera、Safari (デスクトップ/モバイル) など、すべての主流ブラウザーをサポートしています。 data-bind 属性は、許容される属性ではありますが、HTML のネイティブではありません (バリデーターは、それが認識されない属性であることを示しますが、HTML 5 と厳密に互換性があり、HTML 4 では問題を引き起こしません)。ただし、ブラウザはこれが何を意味するかを認識しないため、これを有効にするには KnockoutJs をアクティブにする必要があります。

KnockoutJs を使用する場合、view レイヤーは、view-model レイヤーにリンクするための宣言的バインディングを備えた単なる HTML ドキュメントです。あるいは、view-model. レイヤー内のモデルからのデータを使用して HTML を生成する models

を使用することもできます。

script ブロックを HTML ドキュメントの下部に配置するか、上部に配置して、jQuery の $ 関数のような DOM 対応ハンドラーでコンテンツをラップします。

ko.applyBindings(myViewModel): KnockoutJs で データバインディング を適用し、ViewModel (または Model) をインターフェイスユーザーにバインドするために使用されるメソッドです(表示)。 ViewModel を DOM 内の HTML 要素に接続し、ViewModel からのデータを UI に自動的に反映したり、その逆を行ったりできるようにします。このメソッドを呼び出すと、KnockoutJs は DOM を走査して KnockoutJs の データバインディング ディレクティブを持つ要素を検索し、これらの要素とディレクティブで指定された ViewModel プロパティ間のリンクを作成します。 >

オプションで、2 番目のパラメーターを渡して、データバインディング属性を検索するドキュメントの部分を定義できます。たとえば、ko.applyBindings(myViewModel, document.getElementById('someElementId')) です。これにより、アクティブ化が ID someElementId の要素とその子孫に制限されます。これは、複数の表示モデルがあり、それぞれをページの異なる領域に関連付けたい場合に便利です。

インストール

人気のチュートリアル

詳細>