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.

Modulo di mappatura dei componenti

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

Applicazione a pagina singola basata su modello

Le applicazioni a pagina singola che utilizzano l’SDK SPA JavaScript 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 dal Provider 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 dei componenti e quindi la creano in un'istanza.

Inizializzazione app

Ogni componente viene esteso con le funzionalità di 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 suo componente interno.

2. Il PageModelManager deve essere inizializzato come rappresentato 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 principale front-end Container dell'applicazione.

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

Risorse Business.Adobe.com

Ecommerce Integrations Personalized Experiences Embedded Charts Responsive Forms Document Generation Digital Rights Management