KnockoutJ の概要

このコンテンツは基本的にオリジナル資料の翻訳です。目的は、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 の要素とその子孫に制限されます。これは、複数の表示モデルがあり、それぞれをページの異なる領域に関連付けたい場合に便利です。

インストール

<script> を使用して JavaScript ファイルを参照するだけです。 HTML ページのどこかにあります。<p> <br><pre class="brush:php;toolbar:false"><script type='text/javascript' src='knockout-3.5.1.js'></script>

ダウンロードしたファイルが配置された場所と一致するように src 属性を更新する必要があることは明らかです。

CDN

最速のダウンロード速度を提供するには、公式 KnockoutJs インストール ガイド Web サイトにある次のサードパーティ CDN のいずれかから KnockoutJs を参照することをお勧めします。

以上がKnockoutJ の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。