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

このドキュメントでは、AEM 用 JavaScript SPA SDK で動的モデルとコンポーネントのマッピングがどのようにおこなわれるかを説明します。

ComponentMapping モジュール

ComponentMapping モジュールは、プロントエンドプロジェクトに NPM パッケージとして提供されます。フロントエンドコンポーネントを格納し、単一ページアプリケーションがフロントエンドコンポーネントを AEM リソースタイプにマップする方法を提供します。これにより、アプリケーションの JSON モデルを構文解析する際に、コンポーネントの動的な解決が可能になります。

モデル内の各項目には、AEM リソースタイプを表示する :type フィールドが含まれます。フロントエンドコンポーネントは、マウントされると、基になるライブラリから受け取ったモデルのフラグメントを使用して自分自身をレンダリングできます。

モデル解析とモデルへのフロントエンドコンポーネントアクセスの詳細については、SPA ブループリントドキュメントを参照してください。

Npm パッケージ@adobe/aem-spa-component-mapping も参照してください。

モデル駆動型単一ページアプリケーション

AEM 用 JavaScript SPA SDK を利用する単一ページアプリケーションは、モデル主導です。

  1. フロントエンドコンポーネントは、自らをコンポーネントマッピングストアに登録します。

  2. 次に、コンテナは、 モデルプロバイダーがモデルを提供した後、そのモデルコンテンツ(:items)を反復します。

  3. ページの場合、その子(:children)は、最初に コンポーネントマッピングからコンポーネントクラスを取得し、次にインスタンス化します。

アプリの初期化

各コンポーネントは、ModelProvider の機能で拡張されます。初期化は、次の一般的な形式をとります。

  1. 各モデルプロバイダーは自身を初期化し、内部コンポーネントに対応するモデルの部分に対しておこなわれる変更をリッスンします。

  2. 初期化フローで示されるとおりに、PageModelManager は初期化される必要があります。

  3. 保存されると、ページモデルマネージャーはアプリの完全なモデルを返します。

  4. 次に、このモデルは、アプリケーションのフロントエンドルートコンテナコンポーネントに渡されます。

  5. モデルの断片は、最後に個々の子コンポーネントに伝播されます。

アプリモデルの初期化

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free