Dynamic Model to Component Mapping for SPAs dynamic-model-to-component-mapping-for-spas
This document describes how the dynamic model to component mapping occurs in the JavaScript SPA SDK for AEM.
ComponentMapping Module componentmapping-module
The ComponentMapping module is provided as an NPM package to the front-end project. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. The module enables a dynamic resolution of components when parsing the JSON model of the application.
Each item present in the model contains a :type field that exposes an AEM resource type. When mounted, the front-end component can render itself using the fragment of model it has received from the underlying libraries.
See SPA Blueprint document for more information about model parsing and the front-end component access to the model.
Also see the npm package: @adobe/aem-spa-component-mapping
Model-Driven Single Page Application model-driven-single-page-application
Single Page Applications using the JavaScript SPA SDK for AEM are model-driven:
-
Front-end components register themselves to the Component Mapping Store.
-
Then the Container, once provided with a model by the Model Provider, iterates over its model content (
:items). -
If there is a page, its children (
:children) first get a component class from the Component Mapping and then instantiate it.
App Initialization app-initialization
Each component is extended with the capabilities of the ModelProvider. Initialization therefore takes the following general form:
-
Each model provider initializes itself and listens for changes made to the piece of model that corresponds to its inner component.
-
The
PageModelManagermust be initialized as represented by the initialization flow. -
Once stored, the page model manager returns the complete model of the app.
-
This model is then passed to the front-end root Container component of the application.
-
Pieces of the model are finally propagated to each individual child component.
