Mappage du modèle dynamique avec les composants pour les SPA dynamic-model-to-component-mapping-for-spas
Ce document décrit comment le mappage du modèle dynamique avec les composants se produit dans le SDK JavaScript SPA pour Adobe Experience Manager (AEM).
Module ComponentMapping componentmapping-module
Le module ComponentMapping
est fourni au projet front-end sous la forme d’un package NPM. Il contient les composants front-end et permet à l’application sur une seule page (SPA) de mapper les composants front-end avec les types de ressources AEM. Cela permet une résolution dynamique des composants lors de l’analyse du modèle JSON de l’application.
Chaque élément présent dans le modèle contient un champ :type
qui expose un type de ressource AEM. Une fois monté, le composant front-end peut être rendu à l’aide du fragment de modèle reçu des bibliothèques associées.
Voir Blueprint SPA pour plus d’informations sur l’analyse des modèles et l’accès des composants front-end au modèle.
Consultez également le package npm : https://www.npmjs.com/package/@adobe/aem-spa-component-mapping.
SPA pilotée par un modèle model-driven-single-page-application
Les applications monopages qui utilisent le SDK JavaScript d’application monopage pour AEM sont basées sur des modèles :
-
Les composants front-end s’enregistrent eux-mêmes dans le magasin de mappage de composants.
-
Ensuite, le conteneur, qui a reçu un modèle du fournisseur de modèles, effectue une itération sur son contenu de modèle (
:items
). -
S’il existe une page, ses enfants (
:children
) Commencez par obtenir une classe de composant à partir de la propriété Mappage des composants puis instanciez-le.
Initialisation de l’application app-initialization
Chaque composant est étendu grâce aux capacités du ModelProvider
. L’initialisation se présente donc sous la forme générale suivante :
-
Chaque fournisseur de modèles s’initialise et écoute les modifications apportées au fragment de modèle qui correspond à son composant interne.
-
Le gestionnaire
PageModelManager
doit être initialisé tel qu’il est représenté par le flux d’initialisation. -
Une fois stocké, le gestionnaire de modèles de page renvoie le modèle complet de l’application.
-
Ce modèle est ensuite transmis au composant racine front-end Conteneur de l’application.
-
Les fragments du modèle sont finalement propagés à chaque composant enfant.