SPA Asignación de modelos dinámicos a componentes para la creación de dynamic-model-to-component-mapping-for-spas

SPA En este documento se describe cómo se produce la asignación de modelos dinámicos a componentes en el SDK de JavaScript para la aplicación de modelos de (JavaScript) para Adobe Experience Manager AEM ().

NOTE
SPA SPA El Editor de segmentos es la solución recomendada para los proyectos que requieren un procesamiento basado en el cliente basado en el marco de trabajo de la aplicación (por ejemplo, React o Angular) de la aplicación de la aplicación de la manera más sencilla posible.

Módulo de asignación de componentes componentmapping-module

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

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

Consulte SPA Modelo de 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 una sola página impulsada por modelo model-driven-single-page-application

SPA AEM Las aplicaciones de una sola página que utilizan el SDK de JavaScript para la creación de páginas para la creación de informes 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 proporcionada con un modelo por el Proveedor de modelo, se repite sobre el contenido de su modelo ( :items).

  3. Si hay una página, sus elementos secundarios ( :children) obtenga primero una clase de componente del Asignación de componentes y luego instanciarlo.

Inicialización de aplicaciones app-initialization

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

  1. Cada proveedor de modelos se inicializa a sí mismo y escucha los cambios realizados en el fragmento de modelo que corresponde a su componente interno.

  2. El PageModelManager se debe inicializar tal como lo representa 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. Este modelo se pasa a la raíz del front-end Contenedor componente de la aplicación.

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

app_model_initialization

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2