文件AEM 6.5使用手冊

SPA的動態模型至元件對應 dynamic-model-to-component-mapping-for-spas

Last update: Thu Jan 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 開發人員

本檔案說明適用於Adobe Experience Manager (AEM)的JavaScript SPA SDK中如何產生動態模型與元件的對應。

IMPORTANT
Adobe仍支援SPA編輯器，但現在在AEM中管理Headless內容的偏好編輯器為：

元件對應模組 componentmapping-module

ComponentMapping模組是以NPM封裝形式提供給前端專案。 它儲存前端元件，並提供單頁應用程式將前端元件對應到AEM資源型別的方法。 如此一來，在剖析應用程式的JSON模型時，就能啟用元件的動態解析。

模型中每個專案都包含公開AEM資源型別的:type欄位。 掛載時，前端元件可使用從基礎程式庫收到的模型片段來轉譯自身。

請參閱SPA Blueprint，以取得有關模型剖析和模型的前端元件存取權的詳細資訊。

另請參閱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. 然後，此模型會傳遞至應用程式的前端根Container元件。

  5. 模型片段最後會傳播至每個個別的子元件。

app_model_initialization

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2