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.

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: @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. Im Fall einer Seite erhalten die untergeordneten Elemente ( :children ) zunächst eine Komponentenklasse aus der Komponentenzuordnung und instanziieren sie dann.

App-Initialisierung

Jede Komponente wird mit den Funktionen der ModelProvider Erweiterung 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 PageModelManager Initialisierung muss durch den Initialisierungsfluss dargestellt werden.
  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.