DokumentationAEM 6.5Benutzerhandbuch

Zuordnung dynamischer Modelle zu Komponenten für SPAs dynamic-model-to-component-mapping-for-spas

Last update: Thu Apr 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler

In diesem Dokument wird beschrieben, wie die Zuordnung des dynamischen Modells zu Komponenten im JavaScript SPA SDK für Adobe Experience Manager erfolgt.

NOTE
Der SPA-Editor ist die empfohlene Lösung für Projekte, bei denen Client-seitiges Rendern auf Basis eines SPA-Frameworks (z. B. React oder Angular) erforderlich ist.

ComponentMapping-Modul componentmapping-module

Das ComponentMapping-Modul wird dem Frontend-Projekt als NPM-Paket bereitgestellt. Es speichert Frontend-Komponenten und bietet der Single Page Application die Möglichkeit, Frontend-Komponenten AEM-Ressourcentypen zuzuordnen. Dies ermöglicht beim Parsen des JSON-Modells des Programms eine dynamische Auflösung von Komponenten.

Alle im Modell vorhandenen Elemente enthalten ein Feld :type, das einen AEM-Ressourcentyp verfügbar macht. Bei der Implementierung kann sich die Frontend-Komponente mit dem Fragment des Modells, das sie von den zugrunde liegenden Bibliotheken erhalten hat, selbst rendern.

Weitere Informationen zum Parsen von Modellen und zum Zugriff der Frontend-Komponenten auf das Modell finden Sie unter SPA-Blueprint.

Weitere Informationen finden Sie im npm-Paket: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

Modellgesteuerte Single Page Application model-driven-single-page-application

Anwendungen mit einzelnen Seiten, die das JavaScript SPA SDK für AEM nutzen, sind modellgesteuert:

  1. Frontend-Komponenten registrieren sich selbst im Komponentenzuordnungs-Store.

  2. Anschließend durchläuft der Container, sobald ihm ein Modell vom Modellanbieter zur Verfügung gestellt wurde, seinen Modellinhalt ( :items).

  3. Wenn es eine Seite gibt, erhalten ihre untergeordneten Elemente (:children) zuerst eine Komponentenklasse aus der Komponentenzuordnung und instanziieren sie dann.

App-Initialisierung app-initialization

Jede Komponente wird um die Funktionen des ModelProvider erweitert. Die Initialisierung hat daher die folgende allgemeine Form:

  1. Jeder Modellanbieter initialisiert sich selbst und wartet auf Änderungen, die an dem Modell vorgenommen wurden, das seiner inneren Komponente entspricht.

  2. PageModelManager muss gemäß dem Initialisierungsfluss initialisiert werden.

  3. Nach dem Speichern gibt der Seitenmodell-Manager das vollständige Modell der App zurück.

  4. Dieses Modell wird dann an die Frontend-Stamm-Container-Komponente der App übergeben.

  5. Teile des Modells werden schließlich auf jede einzelne untergeordnete Komponente übertragen.

app_model_initialization

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2