Zuordnung dynamischer Modelle zu Komponenten für SPAs

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

ComponentMapping-Modul

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 eine dynamische Auflösung von Komponenten beim Parsen des JSON-Modells der Anwendung.

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

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

Single Page Applications, die das JavaScript SPA SDK für AEM nutzen, sind modellgesteuert:

  1. Frontend-Komponenten registrieren sich 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. 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 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.

Initialisierung des App-Modells

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now