Routing modello SPA

Per le applicazioni a pagina singola nell’AEM, l’app è responsabile del routing. Questo documento descrive il meccanismo di instradamento, il contratto e le opzioni disponibili.

NOTA

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

Indirizzamento progetto

L’app è proprietaria del routing e viene quindi implementata dagli sviluppatori front-end del progetto. Questo documento descrive il routing specifico del modello restituito dal server AEM. La struttura dati del modello di pagina espone l’URL della risorsa sottostante. Il progetto front-end può utilizzare qualsiasi libreria personalizzata o di terze parti che fornisce funzionalità di indirizzamento. Quando una route richiede un frammento di modello, invia una chiamata al PageModelManager.getData() funzione. Quando viene modificata una route di modello, deve essere attivato un evento per avvisare le librerie in ascolto, come l’Editor pagina.

Architettura

Per una descrizione dettagliata, fare riferimento al PageModelManager sezione del documento Blueprint dell’SPA.

ModelRouter

Il ModelRouter - quando abilitato - incapsula le funzioni API della cronologia di HTML5 pushState e replaceState per garantire che un determinato frammento di modello sia preacquisito e accessibile. Notifica quindi al componente front-end registrato che il modello è stato modificato.

Routing modello manuale e automatico

Il ModelRouter automatizza il recupero dei frammenti del modello. Ma come qualsiasi strumento automatizzato è dotato di limitazioni. Quando necessario, il ModelRouter possono essere disattivati o configurati per ignorare i percorsi che utilizzano le metaproprietà (vedi la sezione Meta Properties della sezione Componente pagina SPA documento). Gli sviluppatori front-end possono quindi implementare il proprio livello di routing del modello richiedendo PageModelManager per caricare un determinato frammento di modello utilizzando getData() funzione.

NOTA

Il Diario We.Retail Un esempio di progetto React illustra l’approccio automatizzato, mentre il progetto Angular illustra quello manuale. Anche un approccio semi-automatizzato sarebbe un caso d’uso valido.

ATTENZIONE

La versione corrente del ModelRouter supporta solo l’utilizzo di URL che puntano al percorso effettivo delle risorse dei punti di ingresso del modello Sling. Non supporta l’utilizzo di URL personalizzati o alias.

Contratto ciclo

L’implementazione corrente si basa sul presupposto che il progetto SPA utilizzi l’API Cronologia HTML5 per il routing alle diverse pagine dell’applicazione.

Configurazione

Il ModelRouter supporta il concetto di instradamento del modello mentre ascolta pushState e replaceState chiamate a frammenti di modello di preacquisizione. Internamente attiva il PageModelManager per caricare il modello che corrisponde a un determinato URL e genera un cq-pagemodel-route-changed che altri moduli possono ascoltare.

Per impostazione predefinita, questo comportamento viene attivato automaticamente. Per disattivarla, l’SPA deve eseguire il rendering della seguente proprietà meta:

<meta property="cq:pagemodel_router" content="disabled"\>

Si noti che ogni via del SPA deve corrispondere a una risorsa accessibile nell’AEM (ad es. " /content/mysite/mypage") dal PageModelManager tenta automaticamente di caricare il modello di pagina corrispondente una volta selezionato il percorso. Tuttavia, se necessario, l’SPA può anche definire un “elenco Bloccati” di vie che devono essere ignorate dall’Autorità PageModelManager:

<meta property="cq:pagemodel_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"/>

In questa pagina