Show Menu
SUJETS×

Mappage Modèle dynamique/Composant pour les applications monopages

Ce document décrit comment le mappage modèle dynamique/composant se produit dans le SDK SPA JavaScript pour AEM.
L’éditeur d’application d’une seule page est la solution recommandée pour les projets nécessitant un rendu côté client basé sur la structure d’application d’une seule page (par exemple, Réagir ou Angulaire).

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 au modèle au composant frontal, veuillez consulter le document SPA Blueprint .

Application d’une seule page pilotée par le 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’inscrivent 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 fonctionnalités du composant . L’initialisation prend donc 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 racine principal Container de l’application.
  5. Les parties du modèle sont finalement propagées à chaque composant enfant individuel.