Show Menu
ARGOMENTI×

Routing modello SPA

Per le applicazioni a pagina singola in AEM, l’app è responsabile del routing. Questo documento descrive il meccanismo di routing, il contratto e le opzioni disponibili.
SPA Editor è la soluzione consigliata per i progetti che richiedono il rendering lato client basato su SPA (ad esempio React o Angular).

Routing del progetto

L'app è proprietaria del routing e viene quindi implementata dagli sviluppatori front-end del progetto. Questo documento descrive il ciclo specifico per il 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 routing. Una volta che una route prevede un frammento di modello, è possibile effettuare una chiamata alla PageModelManager.getData() funzione. Quando un ciclo di lavorazione del modello ha modificato un evento deve essere attivato per avvertire le librerie di ascolto come Editor pagina.

Architettura

Per una descrizione dettagliata, fare riferimento alla sezione PageModelManager del documento SPA Blueprint.

ModelRouter

L'API ModelRouter - se attivata - racchiude le funzioni API HTML5 History pushState e replaceState garantisce che un dato frammento di modello sia preacquisito e accessibile. Quindi, notifica al componente front-end registrato che il modello è stato modificato.

Routing manuale e automatico modelli

Il modello ModelRouter automatizza il recupero dei frammenti del modello. Ma come ogni attrezzo automatizzato è dotato di limitazioni. Se necessario, ModelRouter è possibile disabilitare o configurare in modo da ignorare i percorsi utilizzando le proprietà meta (vedere la sezione Meta Properties del documento componente della pagina SPA). Gli sviluppatori front-end possono quindi implementare un proprio livello di routing del modello richiedendo PageModelManager di caricare qualsiasi frammento del modello utilizzando la getData() funzione.
Attualmente il progetto React di esempio We.Retail Journal illustra l'approccio automatico, mentre il progetto Angular illustra quello manuale. Un approccio semi-automatizzato sarebbe anche un caso d’uso valido.
La versione corrente dell' ModelRouter unico supporto per l'uso di URL che puntano al percorso effettivo delle risorse dei punti di ingresso del modello Sling. Non supporta l’uso di URL personalizzati o alias.

Contratto di routing

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

Configurazione

Supporta ModelRouter il concetto di indirizzamento dei modelli in quanto ascolta pushState e replaceState richiama i frammenti dei modelli di preacquisizione. Internamente attiva la modalità PageModelManager di caricamento del modello che corrisponde a un determinato URL e attiva un cq-pagemodel-route-changed evento che può essere ascoltato da altri moduli.
Per impostazione predefinita, questo comportamento è attivato automaticamente. Per disattivarlo, l'area di protezione deve eseguire il rendering della seguente proprietà meta:
<meta property="cq:pagemodel_router" content="disable"\>

Tenere presente che ogni route dell'SPA deve corrispondere a una risorsa accessibile in AEM (ad esempio, " /content/mysite/mypage" ), dal momento che PageModelManager cercherà automaticamente di caricare il modello di pagina corrispondente una volta che la route è selezionata. Anche se, se necessario, l'SPA può anche definire una "lista nera" di rotte che devono essere ignorate da PageModelManager :
<meta property="cq:pagemodel_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"/>