DocumentazioneAEM 6.5Guida utente

Mappatura da modello dinamico a componente per applicazioni a pagina singola dynamic-model-to-component-mapping-for-spas

Last update: Tue Jun 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5
  • Argomenti:

Creato per:

  • Sviluppatore

Questo documento descrive come si verifica il modello dinamico per la mappatura dei componenti in JavaScript SPA SDK for Adobe Experience Manager (AEM).

IMPORTANT
L'editor SPA è stato dichiarato obsoleto per i nuovi progetti. Rimane supportato da Adobe per i progetti esistenti, ma non deve essere utilizzato per i nuovi progetti. Gli editor preferiti per la gestione dei contenuti headless in AEM sono ora i seguenti:

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 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