In questo documento viene descritto in che modo si verifica la mappatura del modello dinamico al componente nell’SDK Javascript SPA per AEM.
La funzione Editor applicazione (SPA) a pagina singola richiede AEM service pack 2 6.4 o successivo.
SPA Editor è la soluzione consigliata per i progetti che richiedono SPA rendering lato client basato su framework (ad es. React o Angular).
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 sui tipi di risorse AEM. Questo consente 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. Quando è montato, il componente front-end può eseguire il rendering utilizzando il frammento del modello ricevuto dalle librerie sottostanti.
Per ulteriori informazioni sull'analisi dei modelli e sull'accesso al modello dei componenti front-end, fare riferimento al documento SPA Blueprint.
Vedete anche il pacchetto npm: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping
Le applicazioni a pagina singola che utilizzano l’SDK SPA JavaScript per AEM sono basate su modelli:
I componenti front-end si registrano nel archivio mappatura componenti.
Quindi il Contenitore, una volta fornito con un modello dal Provider di modelli, esegue un'iterazione sul contenuto del modello ( :items
).
Nel caso di una pagina, i relativi elementi secondari ( :children
) ottengono prima una classe di componenti dalla mappatura dei componenti e quindi la creano in un'istanza.
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 suo componente interno.
Il PageModelManager
deve essere inizializzato come rappresentato dal flusso di inizializzazione.
Una volta memorizzato, il gestore modelli 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 secondario.