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 JavaScript SPA, SDK para Adobe Experience Manager AEM ().
- Editor universal para editar contenido sin encabezado de forma visual.
- Editor de fragmentos de contenido para la edición de contenido sin encabezado basada en formularios.
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 JavaScript SPA SDK AEM 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.
-
PageModelManagerdebe 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.
