ドキュメントAEM 6.4開発ガイド

SPA の動的モデルとコンポーネントのマッピング dynamic-model-to-component-mapping-for-spas

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

NOTE
シングルページアプリケーション（SPA）エディター機能には、AEM 6.4 サービスパック 2 以降が必要です。
SPA エディターは、SPA フレームワークを基にしたクライアントサイドレンダリング（React など）が必要なプロジェクトで有効なソリューションです。

ComponentMapping モジュール componentmapping-module

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

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

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

npm パッケージも参照してください。https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

モデル駆動型単一ページアプリケーション model-driven-single-page-application

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

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

  2. モデルプロバイダーでモデルが提供されると、コンテナはそのモデルコンテンツ（:items）を反復します。

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

アプリの初期化 app-initialization

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

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

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

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

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

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

app_model_initialization

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e