Dynamisch model naar componenttoewijzing voor SPA

In dit document wordt beschreven hoe het dynamische model naar componenttoewijzing wordt uitgevoerd in de Javascript SPA SDK voor AEM.

OPMERKING

De eigenschap van de Redacteur van de Toepassing van de enig-Pagina (SPA) vereist AEM 6.4 de dienstpak 2 of nieuwer.

De SPA Redacteur is de geadviseerde oplossing voor projecten die SPA kader gebaseerde cliënt-zijteruggeven (b.v. Reageren of Angular) vereisen.

ComponentMapping Module

De ComponentMapping module wordt verstrekt als pakket NPM aan het front-end project. Het slaat front-end componenten op en verstrekt een manier voor de Enige Toepassing van de Pagina om front-end componenten aan AEM middeltypes in kaart te brengen. Hierdoor wordt een dynamische resolutie van componenten ingeschakeld bij het parseren van het JSON-model van de toepassing.

Elke punten in het model bevatten een :type gebied dat een AEM middeltype blootstelt. Als de front-end component is gekoppeld, kan deze zichzelf renderen met behulp van het fragment van het model dat is ontvangen van de onderliggende bibliotheken.

Raadpleeg het document SPA Blueprint voor meer informatie over modelparsering en de front-end componenttoegang tot het model.

Zie ook het npm-pakket: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

Modelgestuurde toepassing voor één pagina

Toepassingen met één pagina die gebruikmaken van de Javascript SPA SDK voor AEM, worden modelgestuurd:

De front-end componenten registreren zich aan de Winkel van de Afbeelding van de Component.
Vervolgens herhaalt de Container, zodra deze is voorzien van een model van de Modelleverancier, de modelinhoud ( :items).
In het geval van een pagina, krijgen zijn kinderen ( :children) eerst een componentenklasse van Component Mapping en dan concretiseren het.

Initialisatie van toepassingen

Elke component wordt uitgebreid met de mogelijkheden van ModelProvider. Initialisatie heeft derhalve de volgende algemene vorm:

Elke modelleverancier initialiseert zich en luistert naar veranderingen die aan het stuk van model worden aangebracht dat aan zijn binnencomponent beantwoordt.
PageModelManager moet worden geïnitialiseerd zoals vertegenwoordigd door initialisatiestroom.
Nadat het paginamodel is opgeslagen, retourneert de paginamodelbeheerder het volledige model van de app.
Dit model wordt dan overgegaan tot de front-end wortel Container component van de toepassing.
Stukken van het model worden uiteindelijk doorgegeven aan elke afzonderlijke onderliggende component.