Show Menu
SUJETS×

Mappage Modèle dynamique/Composant pour les applications monopages

Ce document décrit comment le mappage modèle dynamique avec composant se produit dans le SDK SPA JavaScript pour AEM.
L’éditeur d’applications monopages est la solution recommandée pour les projets qui nécessitent un rendu côté client basé sur la structure d’applications monopages (par exemple, Réagir ou Angular).

Module ComponentMapping

The ComponentMapping module is provided as an NPM package to the front-end project. Il stocke les composants frontaux et permet à l’application d’une seule page de mapper les composants frontaux aux types de ressources AEM. Ceci active 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 :type champ qui expose un type de ressource AEM. Une fois monté, le composant frontal peut être rendu à l’aide du fragment de modèle reçu des bibliothèques sous-jacentes.
Pour plus d'informations sur l'analyse des modèles et sur l'accès des composants frontaux au modèle, consultez le document SPA Blueprint .

Application d'une seule page pilotée par un modèle

Les applications d’une seule page qui utilisent le SDK SPA Javascript pour AEM sont pilotées par des modèles :
  1. Les composants frontaux s'enregistrent dans le magasin de mappage des composants.
  2. Ensuite, le Conteneur , une fois fourni avec un modèle par le fournisseur de modèles, effectue une itération sur son contenu de modèle ( :items ).
  3. Dans le cas d’une page, ses enfants ( :children ) obtiennent d’abord une classe de composants à partir du mappage des composants, puis l’instancient.

Initialisation de l’application

Chaque composant est étendu avec les capacités de la ModelProvider . L'initialisation se présente donc sous la forme générale suivante :
  1. Chaque fournisseur de modèles s’initialise et écoute les modifications apportées à la pièce de modèle qui correspond à son composant interne.
  2. Le fichier doit être initialisé tel qu’il est représenté par le flux d’ initialisation.
  3. Une fois stocké, le gestionnaire de modèles de page renvoie le modèle complet de l’application.
  4. Ce modèle est ensuite transmis au composant Conteneur racine principal de l’application.
  5. Les fragments du modèle sont finalement propagés à chaque composant enfant individuel.