Show Menu
トピック×

SPAの動的モデルとコンポーネントのマッピング

このドキュメントでは、AEM用のJavaScript SPA SDKで動的モデルとコンポーネントのマッピングがどのように行われるかを説明します。
SPAフレームワークベースのクライアント側レンダリング(ReactやAngularなど)を必要とするプロジェクトには、SPA Editorが推奨されるソリューションです。

ComponentMapping モジュール

The ComponentMapping module is provided as an NPM package to the front-end project. フロントエンドコンポーネントが格納され、シングルページアプリケーションがフロントエンドコンポーネントをAEMリソースタイプにマップする方法を提供します。 これにより、アプリケーションのJSONモデルを解析する際に、コンポーネントの動的な解決が可能になります。
モデル内に存在する各項目には、AEMリソースタ :type イプを公開するフィールドが含まれています。 マウントすると、フロントエンドコンポーネントは、基になるライブラリから受け取ったモデルのフラグメントを使用して自分自身をレンダリングできます。
モデル解析とモデルへのフロントエンドコンポーネントアクセスの詳細については、 SPA Blueprint (SPA Blueprint)ドキュメントを参照してください。
npmパッケージも参照してください。https://www.npmjs.com/package/@adobe/cq-spa-component-mapping cq-spa-component-mapping

モデル駆動型シングルページアプリ

AEM向けJavaScript SPA SDKを利用するシングルページアプリケーションは、モデル主導型です。
  1. フロントエンドコンポーネントは、それ自体を Component Mapping storeに登録します
  2. 次に、 Container (コンテナ)は、モデルプロバイダーによってモデルが提供され ると、そのモデルのコンテンツ ( :items )を繰り返し処理します。
  3. ページの場合、その子( :children )は、最初にコンポーネントマッピングからコンポーネントクラスを取得し 、インスタンス化します

アプリの初期化

各コンポーネントは、の機能を使用して拡張されま ModelProvider す。 したがって、初期化は次の一般的な形式をとります。
  1. 各モデルプロバイダーは、自身を初期化し、その内部コンポーネントに対応するモデルに対して行われた変更をリッスンします。
  2. 保存すると、ページモデルマネージャーはアプリの完全なモデルを返します。
  3. 次に、このモデルはアプリケーションのフロントエンドルート Container コンポーネントに渡されます。
  4. モデルの断片は、最終的に各子コンポーネントに伝達されます。