Zuordnung dynamischer Modelle zu Komponenten für SPAs dynamic-model-to-component-mapping-for-spas
In diesem Dokument wird beschrieben, wie die Zuordnung des dynamischen Modells zu Komponenten im JavaScript SPA SDK für AEM erfolgt.
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. Dieses Modul 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 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 im Dokument SPA-Blueprint.
Weitere Informationen finden Sie im npm-Paket: @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:
-
Frontend-Komponenten registrieren sich selbst im Komponentenzuordnungs-Store.
-
Anschließend durchläuft der Container, sobald ihm ein Modell vom Modellanbieter zur Verfügung gestellt wurde, seinen Modellinhalt (
:items). -
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:
-
Jeder Modellanbieter initialisiert sich selbst und wartet auf Änderungen, die an dem Modell vorgenommen wurden, das seiner inneren Komponente entspricht.
-
PageModelManagermuss gemäß dem Initialisierungsfluss initialisiert werden. -
Nach dem Speichern gibt der Seitenmodell-Manager das vollständige Modell der App zurück.
-
Dieses Modell wird dann an die Frontend-Stamm-Container-Komponente der App übergeben.
-
Teile des Modells werden schließlich auf jede einzelne untergeordnete Komponente übertragen.
