Dynamisch model naar componenttoewijzing voor SPA dynamic-model-to-component-mapping-for-spas

In dit document wordt beschreven hoe het dynamische model wordt toegewezen aan componenttoewijzing in de JavaScript SPA SDK voor AEM.

ComponentMapping-module componentmapping-module

De 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 AEM middeltypes in kaart te brengen. De module laat een dynamische resolutie van componenten toe wanneer het ontleden van het model JSON van de toepassing.

Elk item in het model bevat een :type veld 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 SPA document voor meer informatie over modelontleding en de front-end componententoegang tot het model.

Zie ook het npm-pakket: @adobe/aem-spa-component-mapping

Modelgestuurde toepassing voor één pagina model-driven-single-page-application

Toepassingen met één pagina die de JavaScript SPA SDK voor AEM gebruiken, zijn op modellen gebaseerd:

  1. Voorste-end componenten registreren zich aan Opslag voor componenttoewijzing.

  2. Vervolgens worden de Container, zodra het door de Modelleverancier, herhaalt de modelinhoud (:items).

  3. Als er een pagina is, zijn onderliggende elementen (:children) krijgt eerst een componentklasse van de Componenttoewijzing en instantiëren.

Toepassingsinitialisatie app-initialization

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

  1. Elke modelleverancier initialiseert zich en luistert naar veranderingen die aan het stuk van model worden aangebracht dat aan zijn binnencomponent beantwoordt.

  2. De PageModelManager moet worden geïnitialiseerd als vertegenwoordigd door de initialisatiestroom.

  3. Nadat het paginamodel is opgeslagen, retourneert de paginamodelbeheerder het volledige model van de app.

  4. Dit model wordt dan overgegaan tot de front-end wortel Container van de toepassing.

  5. Stukken van het model worden uiteindelijk doorgegeven aan elke afzonderlijke onderliggende component.

Initialisatie toepassingsmodel

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab