SPA的动态模型到组件映射

本文档描述了在AEM的Javascript SPA SDK中如何进行动态模型到组件的映射。

注意

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

组件映射模块

ComponentMapping模块作为NPM包提供到前端项目。 它存储前端组件,并为单页应用程序将前端组件映射到AEM资源类型提供了一种方法。 这样,在解析应用程序的JSON模型时,可动态解析组件。

模型中存在的每个项都包含一个公开AEM资源类型的:type字段。 装载后,前端组件可以使用它从基础库接收的模型片段来呈现自己。

请参阅SPA Blueprint文档,了解有关模型解析和对模型的前端组件访问的详细信息。

另请参阅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