Dynamisch model aan Component Mapping voor SPAs dynamic-model-to-component-mapping-for-spas
Dit document beschrijft hoe het dynamische model aan componentenafbeelding in JavaScript SPA SDK voor Adobe Experience Manager (AEM) voorkomt.
- de Universele Redacteurvoor visueel het uitgeven van hoofdloze inhoud.
- de Redacteur van het Fragment van de Inhoudvoor op vorm-gebaseerde het uitgeven van hoofdloze inhoud.
ComponentMapping-module componentmapping-module
De module ComponentMapping 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 de middeltypes van AEM in kaart te brengen. Hierdoor wordt een dynamische resolutie van componenten ingeschakeld bij het parseren van het JSON-model van de toepassing.
Elke item in het model bevat een veld :type dat een AEM-brontype weergeeft. 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.
Zie Vervaging van het KUUROORDvoor meer informatie over model het ontleden en de front-end componententoegang tot het model.
Zie ook het npm pakket: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping
Modelgestuurde toepassing voor één pagina model-driven-single-page-application
Toepassingen op één pagina die gebruikmaken van de JavaScript SPA SDK voor AEM, zijn gebaseerd op modellen:
-
De front-end componenten registreren zich aan de Opslag van de Afbeelding van de Component.
-
Dan de Container, eens voorzien van een model door de ModelLeverancier, herhaalt over zijn modelinhoud (
:items). -
Als er een pagina is, krijgen zijn kinderen (
:children) eerst een componentenklasse van de Afbeelding van de Componenten dan het concretiseren.
Toepassingsinitialisatie app-initialization
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.
-
PageModelManagermoet worden geïnitialiseerd zoals vertegenwoordigd door de initialiseringsstroom. -
Nadat het paginamodel is opgeslagen, retourneert de paginamodelbeheerder het volledige model van de app.
-
Dit model wordt dan overgegaan tot de front-end wortel component van de Containervan de toepassing.
-
Stukken van het model worden uiteindelijk doorgegeven aan elke afzonderlijke onderliggende component.
