Dynamisk mappning av modell till komponent för SPA dynamic-model-to-component-mapping-for-spas
I det här dokumentet beskrivs hur den dynamiska mappningen av modell till komponent sker i JavaScript SPA SDK för Adobe Experience Manager (AEM).
- Den universella redigeraren för visuell redigering av headless-innehåll.
- Innehållsfragmentredigeraren för formulärbaserad redigering av rubrikfritt innehåll.
ComponentMapping-modul componentmapping-module
Modulen ComponentMapping
tillhandahålls som ett NPM-paket till frontendprojektet. Det lagrar komponenter för användargränssnitt och tillhandahåller ett sätt för Single Page-programmet att mappa komponenter för användargränssnitt till AEM-resurstyper. Detta aktiverar en dynamisk upplösning för komponenter när JSON-modellen för programmet analyseras.
Varje objekt i modellen innehåller ett :type
-fält som visar en AEM-resurstyp. När den är monterad kan den främre komponenten återge sig själv med det fragment av modellen som den har fått från de underliggande biblioteken.
Se SPA-utkast om du vill ha mer information om modellparsning och åtkomst till modellen för den främre komponenten.
Se även npm-paketet: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping
Modellstyrt Single Page-program model-driven-single-page-application
Single-page Applications using the JavaScript SPA SDK for AEM are model-driven:
-
Front-end-komponenter registrerar sig själva för Component Mapping Store.
-
Sedan itererar behållaren, när den har tillhandahållits med en modell av modellprovidern, över sitt modellinnehåll (
:items
). -
Om det finns en sida hämtar dess underordnade sidor (
:children
) först en komponentklass från komponentmappningen och instansierar den sedan.
Programinitiering app-initialization
Varje komponent utökas med funktionerna i ModelProvider
. Initieringen har därför följande allmänna form:
-
Varje modellprovider initierar sig själv och lyssnar efter ändringar som gjorts i den del av modellen som motsvarar dess inre komponent.
-
PageModelManager
måste initieras så som den representeras av initieringsflödet. -
När sidmodellhanteraren har lagrats returnerar den hela appmodellen.
-
Den här modellen skickas sedan till rotkomponenten Container i början av programmet.
-
Delar av modellen sprids slutligen till varje enskild underordnad komponent.