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

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

メモ

SPAフレームワークベースのクライアント側レンダリング(ReactやAngularなど)を必要とするプロジェクトには、SPA Editorが推奨されるソリューションです。

ComponentMapping モジュール

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

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

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

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

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

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

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

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

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

アプリの初期化

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

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

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

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

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

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

app_model_initialization

このページ

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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now