SPA spa-page-component

Sidkomponenten för en SPA tillhandahåller inte elementen HTML i dess underordnade komponenter via en JSP- eller HTML-fil och resursobjekt. Den här åtgärden har delegerats till SPA ramverk. Representationen av underordnade komponenter hämtas som en JSON-datastruktur (d.v.s. modellen). De SPA komponenterna läggs sedan till på sidan enligt den angivna JSON-modellen. Det innebär att sidkomponentens ursprungliga brödkomposition skiljer sig från de förrenderade motsvarigheterna i HTML.

Sidmodellshantering page-model-management

Lösning och hantering av sidmodellen delegeras till en angiven PageModelManager -modul. SPA måste interagera med PageModelManager när det initieras för att hämta den första sidmodellen och registrera sig för modelluppdateringar - oftast när författaren redigerar sidan via sidredigeraren. The PageModelManager kan nås av SPA som ett npm-paket. Som tolk mellan AEM och SPA PageModelManager är avsedd att medfölja SPA.

Om du vill tillåta att sidan kan redigeras, ett klientbibliotek med namnet cq.authoring.pagemodel.messaging måste läggas till för att en kommunikationskanal ska kunna skapas mellan SPA och sidredigeraren. Om den SPA sidkomponenten ärver från sidans wcm/core-komponent finns det följande alternativ för att skapa cq.authoring.pagemodel.messaging tillgänglig klientbibliotekskategori:

  • Om mallen är redigerbar lägger du till klientbibliotekskategorin i sidprincipen.
  • Lägg till klientbibliotekskategorin med customfooterlibs.html för sidkomponenten.

Glöm inte att begränsa möjligheten att inkludera cq.authoring.pagemodel.messaging till sidredigerarens kontext.

Kommunikationsdatatyp communication-data-type

Kommunikationsdatatypen ställs in på ett HTML-element i AEM Page-komponenten med hjälp av data-cq-datatype -attribut. När kommunikationsdatatypen är JSON, når GET-förfrågningarna en komponents Sling Model-slutpunkter. När en uppdatering har gjorts i sidredigeraren skickas JSON-representationen av den uppdaterade komponenten till sidmodellsbiblioteket. Sidmodellbiblioteket varnar sedan SPA om uppdateringar.

SPA -body.html

<div id="page"></div>

Förutom att vara god praxis att inte fördröja DOM-genereringen kräver SPA att skripten läggs till i slutet av brödtexten.

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>

Meta-resursegenskaperna som beskriver SPA innehåll:

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>
NOTE
Standardmodellväljaren anges statiskt när Sling Model-representationen av en komponent begärs.

Metaegenskaper meta-properties

  • cq:wcmmode: Redigerarnas WCM-läge (till exempel sida, mall)
  • cq:pagemodel_root_url: URL för appens rotmodell. Viktigt vid direkt åtkomst till en underordnad sida eftersom den underordnade sidmodellen är ett fragment av appens rotmodell. The PageModelManager disponerar sedan systematiskt om den inledande programmodellen när den anger programmet från dess rotstartpunkt.
  • cq:pagemodel_router: Aktivera eller inaktivera ModelRouter i PageModelManager bibliotek
  • cq:pagemodel_route_filters: Kommaseparerad lista eller reguljära uttryck som tillhandahåller vägar i ModelRouter måste ignorera.

Synkronisering av sidredigeringsövertäckning page-editor-overlay-synchronization

Synkroniseringen av övertäckningarna garanteras av samma Mutation-server som tillhandahålls av cq.authoring.page kategori.

Sling Model JSON Exported Structure Configuration sling-model-json-exported-structure-configuration

När routningsfunktionerna är aktiverade antas att JSON-exporten av SPA innehåller olika vägar för programmet tack vare JSON-exporten av den AEM navigeringskomponenten. JSON-utdata för den AEM navigeringskomponenten kan konfigureras i innehållsprincipen för SPA genom följande två egenskaper:

  • structureDepth: Nummer som motsvarar djupet i det exporterade trädet
  • structurePatterns: Regex för en matris med regexter som motsvarar den sida som ska exporteras
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab