Show Menu
THEMEN×

SPA-Modell-Routing

Bei Einzelseitenanwendungen in AEM ist die App für die Weiterleitung zuständig. In diesem Dokument werden der Routingmechanismus, der Vertrag und die verfügbaren Optionen beschrieben.
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.

Projektaufteilung

Die App ist Eigentümer der Routingfunktion und wird dann von den Frontend-Entwicklern des Projekts implementiert. In diesem Dokument wird die für das vom AEM-Server zurückgegebene Modell spezifische Weiterleitung beschrieben. Die Datenstruktur des Seitenmodells stellt die URL der zugrunde liegenden Ressource dar. Das Front-End-Projekt kann jede benutzerdefinierte Bibliothek oder Bibliothek eines Drittanbieters verwenden, die Routingfunktionen bereitstellt. Sobald eine Route ein Fragment des Modells erwartet, kann ein Aufruf an die PageModelManager.getData() Funktion durchgeführt werden. Wenn eine Modellroute geändert wurde, muss ein Ereignis ausgelöst werden, um Listening-Bibliotheken wie den Seiten-Editor zu warnen.

Architektur

Eine ausführliche Beschreibung finden Sie im Abschnitt PageModelManager des SPA-Blueprint-Dokuments.

ModelRouter

Die ModelRouter - sofern aktiviert - kapselt die HTML5-Verlauf-API-Funktionen pushState und replaceState gewährleistet, dass ein bestimmtes Modellfragment vorab abgerufen und verfügbar ist. Anschließend benachrichtigt er die registrierte Front-End-Komponente, dass das Modell geändert wurde.

Manuelle und automatische Modellverfolgung

Das ModelRouter automatisiert das Abrufen von Fragmenten des Modells. Aber wie jedes automatisierte Werkzeug kommt es mit Einschränkungen. Bei Bedarf ModelRouter kann das Element deaktiviert oder so konfiguriert werden, dass Pfade mithilfe von Metaeigenschaften ignoriert werden (siehe Abschnitt "Metaeigenschaften"des Dokuments " SPA-Seitenkomponente "). Front-End-Entwickler können dann ihre eigene Modell-Routing-Ebene implementieren, indem sie die Anforderung stellen, ein beliebiges Fragment des Modells mit der PageModelManager getData() Funktion zu laden.
Derzeit zeigt das Projekt We.Retail Journal sample React den automatisierten Ansatz, während das Angular-Projekt das manuelle. Ein halbautomatisierter Ansatz wäre auch ein gültiger Anwendungsfall.
Die aktuelle Version der ModelRouter einzigen Version unterstützt die Verwendung von URLs, die auf den tatsächlichen Ressourcenpfad von Sling Model-Einstiegspunkten zeigen. Die Verwendung von Vanity-URLs oder Aliasnamen wird nicht unterstützt.

Routing-Vertrag

Die aktuelle Implementierung basiert auf der Annahme, dass das SPA-Projekt die HTML5-Verlauf-API für die Weiterleitung zu den verschiedenen Anwendungsseiten verwendet.

Konfiguration

Das ModelRouter unterstützt das Konzept der Modellweiterleitung, da es auf Modellfragmente wartet pushState und diese replaceState aufruft. Intern löst sie das Laden des Modells aus, das einer bestimmten URL entspricht, und löst ein Ereignis aus, auf das andere Module lauschen können. PageModelManager cq-pagemodel-route-changed
Standardmäßig ist dieses Verhalten automatisch aktiviert. Um es zu deaktivieren, sollte die SPA die folgende Meta-Eigenschaft rendern:
<meta property="cq:pagemodel_router" content="disable"\>

Note that every route of the SPA should correspond to an accessible resource in AEM (e.g., " /content/mysite/mypage" ) since the PageModelManager will automatically try to load the corresponding page model once the route is selected. Though, if needed, the SPA can also define a "black list" of routes that should be ignored by the PageModelManager :
<meta property="cq:pagemodel_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"/>