SPA の動的モデルとコンポーネントのマッピング dynamic-model-to-component-mapping-for-spas
このドキュメントでは、AEM 用 JavaScript SPA SDK で動的モデルとコンポーネントのマッピングがどのように行われるかを説明します。
ComponentMapping モジュール componentmapping-module
ComponentMapping モジュールは、プロントエンドプロジェクトに NPM パッケージとして提供されます。フロントエンドコンポーネントを格納し、単一ページアプリケーションがフロントエンドコンポーネントを AEM リソースタイプにマップする方法を提供します。このモジュールにより、アプリケーションの JSON モデルを構文解析する際に、コンポーネントを動的に解決できるようになります。
モデル内の各項目には、AEM リソースタイプを表示する :type フィールドが含まれます。フロントエンドコンポーネントは、マウントされると、基になるライブラリから受け取ったモデルのフラグメントを使用してコンポーネント自体をレンダリングできます。
モデル解析とモデルへのフロントエンドコンポーネントアクセスの詳細については、SPA ブループリントドキュメントを参照してください。
Npm パッケージ@adobe/aem-spa-component-mapping も参照してください。
モデル駆動型単一ページアプリケーション model-driven-single-page-application
AEM 用 JavaScript SPA SDK を使用する単一ページアプリケーションは、モデル主導です。
-
フロントエンドコンポーネントは、自らをコンポーネントマッピングストアに登録します。
-
ページがある場合、そのページの子（
:children）は、最初にコンポーネントマッピングからコンポーネントクラスを取得してから、取得したクラスをインスタンス化します。
アプリの初期化 app-initialization
各コンポーネントは、ModelProvider の機能で拡張されます。初期化は、次の一般的な形式をとります。
-
各モデルプロバイダーは自身を初期化し、内部コンポーネントに対応するモデルの部分に対しておこなわれる変更をリッスンします。
-
初期化フローで示されるとおりに、
PageModelManagerは初期化される必要があります。 -
保存されると、ページモデルマネージャーはアプリの完全なモデルを返します。
-
次に、このモデルは、アプリケーションのフロントエンドルートコンテナコンポーネントに渡されます。
-
モデルの断片は、最後に個々の子コンポーネントに伝播されます。
