Asignación de modelos dinámicos a componentes para SPA

PRECAUCIÓN

AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

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.

NOTA

La función Editor de aplicaciones de una sola página (SPA) requiere AEM 6.4 service pack 2 o posterior.

El Editor de SPA es la solución recomendada para proyectos que requieren SPA procesamiento del lado del cliente basado en el marco de trabajo (por ejemplo, React o Angular).

Módulo ComponentMapping

La variable 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 :type campo que muestra un tipo de recurso AEM. Cuando se monta, el componente frontal puede procesarse utilizando el fragmento de modelo que ha recibido de las bibliotecas subyacentes.

Consulte la Modelo SPA documento 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 impulsada por modelo

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

Los componentes del front-end se registran a sí mismos en el Almacén de asignación de componentes.
A continuación, el Contenedor, una vez que el Proveedor de modelo, se repite sobre el contenido del modelo ( :items).
En el caso de una página, sus elementos secundarios ( :children) obtenga primero una clase de componente de la Asignación de componentes y luego instancie.

Inicialización de la aplicación

Cada componente se amplía con las capacidades del ModelProvider. Por lo tanto, la inicialización adopta la siguiente forma general:

Cada proveedor de modelos se inicializa y escucha los cambios realizados en la pieza del modelo que corresponde a su componente interno.
La variable PageModelManager debe inicializarse tal y como lo representa el flujo de inicialización.
Una vez almacenado, el administrador del modelo de página devuelve el modelo completo de la aplicación.
Este modelo se pasa entonces a la raíz del front-end Contenedor de la aplicación.
Los fragmentos del modelo se propagan finalmente a cada componente secundario individual.