文档AEM 6.5用户指南

SPA的动态模型到组件映射 dynamic-model-to-component-mapping-for-spas

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 开发人员

本文档介绍在JavaScript SPA SDK for Adobe Experience Manager (AEM)中如何进行组件动态映射。

NOTE
SPA编辑器是推荐的解决方案，适用于需要基于SPA框架的客户端渲染(例如React或Angular)的项目。

组件映射模块 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

使用JavaScript SPA SDK for AEM的单页应用程序是模型驱动的：

  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