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

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

Nota

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

Módulo ComponentMapping

El ComponentMapping módulo 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 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 de modelo SPA 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 Javascript SPA para AEM están basadas en modelos:

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

  2. A continuación, el Contenedor, una vez que el proveedor delmodelo le proporciona un 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, a continuación, la instancian.

Inicialización de la aplicación

Cada componente se amplía con las capacidades del 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 debe PageModelManager inicializarse como representado por el flujo deinicializació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 de Contenedor raíz del front-end de la aplicación.

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

app_model_initialize

En esta página