Mappatura dinamica da modello a componente per SPA dynamic-model-to-component-mapping-for-spas
Questo documento descrive come avviene la mappatura del modello dinamico ai componenti nell'SDK Javascript SPA per AEM.
Modulo di mappatura componenti componentmapping-module
La ComponentMapping
Il modulo viene fornito come pacchetto NPM al progetto front-end. Memorizza i componenti front-end e consente all’applicazione a pagina singola di mappare i componenti front-end sui tipi di risorse AEM. In questo modo si abilita una risoluzione dinamica dei componenti durante l’analisi del modello JSON dell’applicazione.
Ogni elemento presente nel modello contiene un :type
campo che espone un tipo di risorsa AEM. Quando è montato, il componente front-end può renderizzarsi utilizzando il frammento di modello ricevuto dalle librerie sottostanti.
Fai riferimento alla Blueprint SPA per ulteriori informazioni sull'analisi dei modelli e sull'accesso al modello dei componenti front-end.
Vedi anche il pacchetto npm: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping
Applicazione a pagina singola basata su modello model-driven-single-page-application
Le applicazioni a pagina singola che sfruttano l’SDK SPA Javascript per AEM sono basate su modelli:
-
I componenti front-end si registrano al Archivio di mappatura dei componenti.
-
Quindi il Contenitoreuna volta fornito con un modello Provider di modelli, esegue iterazioni sul contenuto del modello (
:items
). -
Nel caso di una pagina, i relativi elementi secondari (
:children
) per prima cosa, ottieni una classe di componente dal Mappatura dei componenti e poi istanziarlo.
Inizializzazione app app-initialization
Ogni componente viene esteso con le funzionalità del ModelProvider
. L'inizializzazione assume pertanto la seguente forma generale:
-
Ogni provider di modelli si inizializza e ascolta le modifiche apportate al pezzo di modello che corrisponde al suo componente interno.
-
La
PageModelManager
deve essere inizializzato come rappresentato dal flusso di inizializzazione. -
Una volta memorizzato, il gestore dei modelli di pagina restituisce il modello completo dell’app.
-
Questo modello viene quindi trasmesso alla radice front-end Contenitore componente dell'applicazione.
-
I pezzi del modello vengono infine propagati a ogni singolo componente figlio.