Show Menu
ARGOMENTI×

Mappatura da modello dinamico a componente per SPA

In questo documento viene descritto in che modo si verifica la mappatura del modello dinamico al componente nell’SDK Javascript SPA per AEM.
SPA Editor è la soluzione consigliata per i progetti che richiedono il rendering lato client basato su SPA (ad esempio React o Angular).

Modulo di mappatura dei componenti

Il ComponentMapping 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. Questo consente 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ò 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, consultare il documento SPA Blueprint .

Applicazione a pagina singola basata su modello

Le applicazioni a pagina singola che sfruttano l’SDK Javascript SPA per AEM sono basate su modelli:
  1. I componenti front-end si registrano nell’archivio di mappatura dei componenti.
  2. Quindi il Contenitore , una volta fornito con un modello dal fornitore di modelli, esegue un'iterazione sul contenuto del modello ( :items ).
  3. Nel caso di una pagina, i relativi elementi secondari ( :children ) ottengono prima una classe di componenti dalla mappatura ComponentMapping dei componenti e quindi la creano in un’istanza.

Inizializzazione app

Ogni componente viene esteso con le funzionalità del componente . 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 suo componente interno.
  2. L' inizializzazione deve essere rappresentata dal flusso di inizializzazione.
  3. Una volta memorizzato, il gestore modelli pagina restituisce il modello completo dell'app.
  4. Questo modello viene quindi passato al componente Contenitore principale front-end dell’applicazione.
  5. I pezzi del modello vengono infine propagati a ogni singolo componente secondario.