Mappatura di un modello dinamico a un componente per SPA

Questo documento descrive come avviene la mappatura del modello dinamico ai componenti nell’SDK SPA JavaScript per l’AEM.

Modulo ComponentMapping

Il 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 :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.

Consulta Blueprint SPA per ulteriori informazioni sull'analisi del modello e sull'accesso al modello da parte del componente front-end.

Vedi anche il pacchetto npm: @adobe/aem-spa-component-mapping

Applicazione a pagina singola basata su modello

Le applicazioni a pagina singola che utilizzano JavaScript SPA SDK per AEM sono basate su modelli:

1. I componenti front-end si registrano nel Archivio mappatura componenti.

2. Quindi il Contenitore, una volta fornito con un modello da Provider modello, scorre sul contenuto del modello (:items).

3. Se è presente una pagina, i relativi elementi secondari (:children) per prima cosa ottieni una classe di componente da Mappatura dei componenti e poi crearne un'istanza.

Inizializzazione app

Ogni componente viene esteso con le funzionalità ModelProvider. L'inizializzazione assume pertanto la seguente forma generale:

1. Ogni provider di modelli si inizializza e ascolta le modifiche apportate al pezzo di modello che corrisponde al relativo componente interno.

2. Il PageModelManager deve essere inizializzato come rappresentato da flusso di inizializzazione.

3. Una volta memorizzata, il gestore modelli della pagina restituisce il modello completo dell’app.

4. Questo modello viene quindi passato alla directory principale front-end Contenitore componente dell'applicazione.

5. I pezzi del modello vengono infine propagati a ogni singolo componente figlio.