Mappatura di un modello dinamico a un componente per SPA dynamic-model-to-component-mapping-for-spas

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

Modulo ComponentMapping componentmapping-module

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

Per ulteriori informazioni sull'analisi del modello e sull'accesso al componente front-end del modello, consulta il documento Blueprint per SPA.

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

Applicazione a pagina singola basata su modello model-driven-single-page-application

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

  1. I componenti front-end si registrano nell'archivio mappature componenti.

  2. Il contenitore, una volta fornito con un modello dal provider di modelli, scorre il contenuto del modello (:items).

  3. Se è presente una pagina, i relativi elementi secondari (:children) ottengono prima una classe di componente da Mappatura componente e quindi creano un'istanza.

Inizializzazione app app-initialization

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 relativo componente interno.

  2. PageModelManager deve essere inizializzato come rappresentato dal flusso di inizializzazione.

  3. Una volta memorizzata, il gestore modelli della 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 figlio.

Inizializzazione modello app

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab