Il componente page di un SPA non fornisce gli elementi HTML dei suoi componenti secondari tramite un file JSP o HTL e oggetti risorsa. Questa operazione è delegata al framework SPA. La rappresentazione dei componenti figlio viene recuperata come struttura di dati JSON (ovvero come modello). I componenti SPA vengono quindi aggiunti alla pagina in base al modello JSON fornito. Di conseguenza, la composizione del corpo iniziale del componente Pagina è diversa dalle controparti HTML sottoposte a rendering preliminare.
La risoluzione e la gestione del modello di pagina sono delegate a un PageModelManager
modulo. L'SPA deve interagire con PageModelManager
modulo quando viene inizializzato per recuperare il modello della pagina iniziale e registrarsi per gli aggiornamenti del modello, per lo più prodotto quando l’autore modifica la pagina tramite l’Editor pagina. Il PageModelManager
è accessibile dal progetto SPA come pacchetto npm. Interprete tra l'AEM e l'SPA, il PageModelManager
deve accompagnare l’SPA.
Per consentire l’authoring della pagina, una libreria client denominata cq.authoring.pagemodel.messaging
per fornire un canale di comunicazione tra l’SPA e l’editor pagina. Se il componente Pagina SPA eredita dalla pagina wcm/core, allora sono disponibili le seguenti opzioni per rendere cq.authoring.pagemodel.messaging
categoria librerie client disponibile:
customfooterlibs.html
del componente Pagina.Non dimenticare di limitare l'inclusione di cq.authoring.pagemodel.messaging
al contesto dell’editor pagina.
Il tipo di dati di comunicazione viene impostato come elemento HTML all’interno del componente Pagina AEM utilizzando data-cq-datatype
attributo. Quando il tipo di dati di comunicazione è impostato su JSON, le richieste GET raggiungono gli endpoint del modello Sling di un componente. Dopo che si verifica un aggiornamento nell’editor di pagine, la rappresentazione JSON del componente aggiornato viene inviata alla libreria Modello di pagina. La libreria Modello pagina avvisa quindi l’SPA in merito agli aggiornamenti.
Componente pagina SPA -body.html
<div id="page"></div>
Oltre a essere una buona pratica per non ritardare la generazione del DOM, il framework SPA richiede che gli script vengano aggiunti alla fine del corpo.
Componente pagina SPA -customfooterlibs.html
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly>
<sly data-sly-test="${wcmmode.edit || wcmmode.preview}"
data-sly-call="${clientLib.js @ categories='cq.authoring.pagemodel.messaging'}"></sly>
<sly data-sly-call="${clientLib.js @ categories='we-retail-journal-react'}"></sly>
Le proprietà delle metarisorse che descrivono il contenuto dell’SPA:
Componente pagina SPA -customheaderlibs.html
<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>
<meta property="cq:pagemodel_root_url" data-sly-use.page="com.adobe.cq.sample.spa.journal.models.AppPage" content="${page.rootUrl}"/>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='we-retail-journal-react'}"/>
</sly>
Il selettore del modello di default è impostato in modo statico quando si richiede la rappresentazione del modello Sling di un componente.
cq:wcmmode
: modalità WCM degli editor (ad esempio, pagina, modello)cq:pagemodel_root_url
: URL del modello principale dell’app. Fondamentale quando si accede direttamente a una pagina figlio, poiché il modello di pagina figlio è un frammento del modello principale dell’app. Il PageModelManager
quindi ricompone sistematicamente il modello iniziale dell'applicazione come ingresso nell'applicazione dal relativo punto di ingresso principale.cq:pagemodel_router
: attiva o disattiva la ModelRouter
del PageModelManager
libreriacq:pagemodel_route_filters
: elenco separato da virgole o espressioni regolari per fornire percorsi ModelRouter
deve ignorare.La sincronizzazione delle sovrapposizioni è garantita dallo stesso Mutation Observer fornito da cq.authoring.page
categoria.
Quando le funzionalità di routing sono abilitate, si presume che l’esportazione JSON dell’SPA contenga le diverse route dell’applicazione grazie all’esportazione JSON del componente di navigazione AEM. L’output JSON del componente di navigazione AEM può essere configurato nel criterio del contenuto della pagina principale dell’SPA tramite le due proprietà seguenti:
structureDepth
: numero corrispondente alla profondità della struttura esportatastructurePatterns
: Regex dell’array di regex corrispondenti alla pagina da esportare