Show Menu
トピック×

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

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

ComponentMapping モジュール

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

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

AEM向けJavaScript SPA SDKを利用する単一ページアプリケーションは、モデル駆動です。
  1. フロントエンドコンポーネントは、それ自体を コンポーネントマッピングストアに登録します

アプリの初期化

各コンポーネントは、の機能で拡張され ModelProvider ます。 初期化は、次の一般的な形式をとります。
  1. 各モデルプロバイダは自身を初期化し、内部コンポーネントに対応するモデルの部分に対して行われた変更をリッスンします。
  2. 初期化フローで示されるとおりに 初期化する 必要があります SPA ブループリント
  3. 保存すると、ページモデルマネージャーはアプリの完全なモデルを返します。
  4. 次に、このモデルは、アプリケーションのフロントエンドルート コンテナ ・コンポーネントに渡されます。
  5. モデルの断片は、最後に個々の子コンポーネントに伝播されます。