Mappatura di un modello dinamico a un componente per SPA dynamic-model-to-component-mapping-for-spas
Questo documento descrive come avviene la mappatura del modello dinamico ai componenti nell’SDK per SPA di JavaScript per l’AEM.
Modulo ComponentMapping componentmapping-module
Il modulo ComponentMapping 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 ai tipi di risorse AEM. Il modulo abilita una risoluzione dinamica dei componenti durante l’analisi del modello JSON dell’applicazione.
Ogni elemento presente nel modello contiene un campo :type che espone un tipo di risorsa AEM. Una volta montato, il componente front-end può eseguire il rendering utilizzando il frammento di modello ricevuto dalle librerie sottostanti.
Per ulteriori informazioni sull'analisi del modello e sull'accesso al componente front-end del modello, consulta il documento Blueprint per SPA.
Vedi anche il pacchetto npm: @adobe/aem-spa-component-mapping
Applicazione a pagina singola basata su modello model-driven-single-page-application
Le applicazioni a pagina singola che utilizzano JavaScript SPA SDK per AEM sono basate su modelli:
-
I componenti front-end si registrano nell'archivio mappature componenti.
-
Il contenitore, una volta fornito con un modello dal provider di modelli, scorre il contenuto del modello (
:items). -
Se è presente una pagina, i relativi elementi secondari (
:children) ottengono prima una classe di componente da Mappatura componente e quindi creano un'istanza.
Inizializzazione app app-initialization
Ogni componente viene esteso con le funzionalità di 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 relativo componente interno.
-
PageModelManagerdeve essere inizializzato come rappresentato dal flusso di inizializzazione. -
Una volta memorizzata, il gestore modelli della pagina restituisce il modello completo dell’app.
-
Questo modello viene quindi passato al componente principale front-end Container dell'applicazione.
-
I pezzi del modello vengono infine propagati a ogni singolo componente figlio.
