SPA Asignación de modelos dinámicos a componentes para la creación de dynamic-model-to-component-mapping-for-spas
En este documento se describe cómo se produce la asignación de modelos dinámicos a componentes en el SDK de JavaScript SPA para la implementación de la plataforma de desarrollo de software (SDK) para la implementación de Adobe Experience Manager AEM ().
Módulo de asignación de componentes componentmapping-module
El módulo ComponentMapping
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.
AEM Cada elemento presente en el modelo contiene un campo :type
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.
SPA Consulte Modelo de para obtener más información sobre el análisis del modelo y el acceso del componente 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
Las aplicaciones de una sola página que utilizan el SDK de JavaScript SPA AEM para la creación de informes de la página para la creación de informes están basadas en modelos:
-
Los componentes front-end se registran a sí mismos en el Almacén de asignaciones de componentes.
-
A continuación, el contenedor, una vez proporcionado con un modelo por el proveedor de modelos, se repite sobre el contenido de su modelo (
:items
). -
Si hay una página, sus elementos secundarios (
:children
) obtienen primero una clase de componente de la asignación de componentes y, a continuación, crean una instancia de ella.
Inicialización de aplicaciones app-initialization
Cada componente se amplía con las capacidades de ModelProvider
. Por lo tanto, la inicialización adopta la siguiente forma general:
-
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.
-
PageModelManager
debe inicializarse tal como lo representa el flujo de inicialización. -
Una vez almacenado, el administrador de modelos de página devuelve el modelo completo de la aplicación.
-
A continuación, se pasa este modelo al componente Contenedor raíz del front-end de la aplicación.
-
Las partes del modelo finalmente se propagan a cada componente secundario individual.