DocumentazioneAEM 6.5Guida utente

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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Sviluppatore

Questo documento descrive come avviene la mappatura del modello dinamico ai componenti nell’SDK SPA di JavaScript per Adobe Experience Manager (AEM).

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

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. Ciò 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, vedere Blueprint per SPA.

Vedi anche il pacchetto npm: https://www.npmjs.com/package/@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 Contenitore, una volta fornito con un modello da 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.

app_model_initialization

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2