Asignación dinámica de modelo a componente para SPA

En este documento se describe cómo se produce la asignación de modelos dinámicos a componentes en el SDK de SPA de Javascript para AEM.

Módulo ComponentMapping

El módulo ComponentMapping se proporciona como paquete NPM al proyecto front-end. Almacena componentes front-end y proporciona una forma para que la aplicación de una sola página asigne componentes front-end a AEM tipos de recursos. Esto permite una resolución dinámica de los componentes al analizar el modelo JSON de la aplicación.

Cada elemento presente en el modelo contiene un campo :type que expone un tipo de recurso AEM. Cuando se monta, el componente front-end puede procesarse utilizando el fragmento de modelo que ha recibido de las bibliotecas subyacentes.

Consulte el documento SPA modelo para obtener más información sobre el análisis de modelos y el acceso de componentes front-end al modelo.

Consulte también el paquete npm: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

Aplicación de página única basada en modelo

Las aplicaciones de una sola página que utilizan el SDK de SPA de Javascript para AEM están basadas en modelos:

1. Los componentes front-end se registran en el Almacenamiento de asignación de componentes.

2. A continuación, el Contenedor, una vez proporcionado con un modelo por el Proveedor del modelo, se repite sobre su contenido del modelo ( :items).

3. En el caso de una página, sus elementos secundarios ( :children) primero obtienen una clase de componente de la Asignación de componentes y luego la instancian.

Inicialización de la aplicación

Cada componente se amplía con las capacidades de ModelProvider. Por consiguiente, la inicialización tiene la siguiente forma general:

1. Cada proveedor de modelos se inicializa y escucha los cambios realizados en la pieza del modelo que corresponde a su componente interior.

2. El PageModelManager debe inicializarse como representado por el flujo de inicialización.

3. Una vez almacenado, el administrador de modelos de página devuelve el modelo completo de la aplicación.

4. A continuación, este modelo se pasa al componente raíz Contenedor del front-end de la aplicación.

5. Las partes del modelo se propagan finalmente a cada componente secundario individual.