Show Menu
THEMEN×

Zuordnung dynamischer Modelle zu Komponenten für SPAs

In diesem Dokument wird beschrieben, wie das dynamische Modell zur Komponentenzuordnung im JavaScript-SPA-SDK für AEM ausgeführt wird.
Der SPA-Editor ist die empfohlene Lösung für Projekte, bei denen clientseitiges Rendering (z.B. React oder Angular) durch das SPA-Framework erforderlich ist.

ComponentMapping-Modul

The ComponentMapping module is provided as an NPM package to the front-end project. Es speichert Front-End-Komponenten und bietet der Einzelseitenanwendung die Möglichkeit, Frontend-Komponenten AEM Ressourcentypen zuzuordnen. Dies ermöglicht eine dynamische Auflösung von Komponenten beim Parsen des JSON-Modells der Anwendung.
Alle im Modell vorhandenen Elemente enthalten ein :type Feld, das einen AEM Ressourcentyp verfügbar macht. Bei der Bereitstellung kann sich die Front-End-Komponente mit dem Fragment des Modells wiedergeben, das sie von den zugrunde liegenden Bibliotheken erhalten hat.
Weitere Informationen zur Modellanalyse und zum Zugriff auf die Front-End-Komponenten finden Sie im Dokument SPA Blueprint .
Weitere Informationen finden Sie im npm-Paket: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

Modellgesteuerte Einzelseitenanwendung

Einzelseitenanwendungen, die das JavaScript-SPA-SDK für AEM nutzen, werden modellgesteuert:
  1. Front-End-Komponenten registrieren sich im Component Mapping Store .
  2. Anschließend durchläuft der Container , sobald ihm ein Modell vom Modellanbieter zur Verfügung gestellt wurde, seinen Modellinhalt ( :items ).
  3. Bei einer Seite erhält deren untergeordnete Elemente ( :children ) zunächst eine Komponentenklasse aus der Komponentenzuordnung und instanziieren sie dann.

App-Initialisierung

Jede Komponente wird mit den Funktionen des ModelProvider erweitert. Die Initialisierung erfolgt daher in folgender allgemeiner Form:
  1. Jeder Modellanbieter initialisiert sich selbst und überwacht Änderungen, die an dem Teil des Modells vorgenommen wurden, der seiner inneren Komponente entspricht.
  2. Die Initialisierung muss entsprechend dem Initialisierungsfluss erfolgen.
  3. Nach dem Speichern gibt der Seitenmodellmanager das vollständige Modell der App zurück.
  4. Dieses Modell wird dann an die Front-End-Stamm- Container -Komponente der Anwendung übergeben.
  5. Teile des Modells werden schließlich auf jede einzelne untergeordnete Komponente übertragen.