Mappatura dinamica da modello a componente per SPA

ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Questo documento descrive come avviene la mappatura del modello dinamico ai componenti nell'SDK Javascript SPA per AEM.

NOTA

La funzione Editor applicazioni a pagina singola (SPA) richiede AEM service pack 2 o successivo 6.4.

L’editor di SPA è la soluzione consigliata per i progetti che richiedono SPA rendering lato client basato su framework (ad esempio, React o Angular).

Modulo di mappatura componenti

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

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

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.