DocumentationAEM 6.4Guide de développement

Mappage du modèle dynamique avec les composants pour les SPA dynamic-model-to-component-mapping-for-spas

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Developer
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Ce document décrit le fonctionnement du mappage du modèle dynamique avec les composants dans le SDK de SPA JavaScript pour AEM.

NOTE
La fonction Éditeur d’application sur une seule page (SPA) requiert AEM Service Pack 2 ou version ultérieure.
L’éditeur de SPA est la solution recommandée pour les projets nécessitant un rendu côté client basé sur un framework de SPA (par exemple React ou Angular).

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.

Pour plus d’informations sur l’analyse des modèles et l’accès des composants front-end au modèle, consultez le document Plan directeur d’applications sur une seule page (SPA).

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 SPA qui utilisent le SDK JavaScript SPA pour AEM sont pilotées par des modèles :

  1. Les composants front-end s’enregistrent eux-mêmes dans le magasin de mappage de composants.

  2. 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).

  3. Dans le cas d’une page, ses enfants (:children) obtiennent d’abord une classe de composants du mappage des composants, puis l’instancient.

Initialisation de l’application app-initialization

Chaque composant est étendu grâce aux capacités de la fonction 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 au fragment de modèle qui correspond à son composant interne.

  2. Le gestionnaire PageModelManager 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 front-end Conteneur de l’application.

  5. Les fragments du modèle sont finalement propagés à chaque composant enfant.

app_model_initialization

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e