SPA頁元件

在SPA中，頁面元件不提供其子元件的HTML元素，而是將其委派到SPA架構。 本檔案說明如何讓SPA的頁面元件變得獨特。

注意

SPA編輯器是建議的解決方案，適用於需要以SPA架構為基礎的用戶端轉換（例如React或Angular）的專案。

簡介

SPA的頁面元件不會透過JSP或HTL檔案與資源物件提供其子元件的HTML元素。 此操作委託給SPA框架。 子元件的表示方式會擷取為JSON資料結構（即模型）。 然後，SPA元件會根據提供的JSON模型新增至頁面。 因此，頁面元件初始內文構圖與預先轉譯的HTML對應內容不同。

頁面模型管理

將頁面模型的解析度和管理委託給提供的 PageModelManager模組。 SPA在初始化時必須與PageModelManager模組交互，以提取初始頁面模型並註冊模型更新——大部分是在作者通過頁面編輯器編輯頁面時生成的。 PageModelManager可由SPA項目作為npm包訪問。 PageModelManager是AEM和SPA之間的解譯器，應隨附於SPA。

要允許編寫頁面，必須添加名為cq.authoring.pagemodel.messaging的客戶端庫，以在SPA和頁面編輯器之間提供通信通道。 如果SPA頁元件繼承自頁wcm/core元件，則有以下選項可使cq.authoring.pagemodel.messaging客戶端庫類別可用：

  • 如果範本是可編輯的，請將用戶端程式庫類別新增至頁面原則。
  • 使用頁面元件的customfooterlibs.html新增用戶端程式庫類別。

不要忘記將cq.authoring.pagemodel.messaging類別的包含限制在頁面編輯器的上下文中。

通信資料類型

通訊資料類型是使用data-cq-datatype屬性，在AEM Page元件內設定HTML元素。 當通訊資料類型設為JSON時，GET請求會點擊元件的Sling Model端點。 在頁面編輯器中發生更新後，更新元件的JSON表示法會傳送至頁面模型程式庫。 然後頁面模型庫會警告SPA更新。

SPA頁面元件-body.html

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

除了不延遲DOM生成的良好做法外，SPA框架還要求在主體末尾添加指令碼。

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>

描述SPA內容的元資源屬性：

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

在請求元件的Sling Model表示時，預設模型選取器會靜態設定。

中繼屬性

  • cq:wcmmode:編輯器的WCM模式（例如頁面、範本）

  • cq:pagemodel_root_url:應用程式的根模型URL。直接存取子頁面時很重要，因為子頁面模型是應用程式根模型的片段。 然後， [PageModelManager](/docs/experience-manager-65/sites-developing/spa-page-component.md)系統地將應用程式初始模型重新合成為從其根入口點進入應用程式。

  • cq:pagemodel_router:啟用或停用 [ModelRouter](/docs/experience-manager-65/sites-developing/spa-routing.md) 程式庫 PageModelManager 。

  • cq:pagemodel_route_filters:以逗號分隔的清單或規則表達式，以提供必須忽 [ModelRouter](/docs/experience-manager-65/sites-developing/spa-routing.md) 略的路由。

注意

本檔案僅將We.Retail Journal應用程式用於展示用途。 它不應用於任何項目工作。

任何AEM專案都應運用AEM Project Archetype，它支援使用React或Angular的SPA專案，並運用SPA SDK。AEM上的所有SPA專案都應以SPA Starter Kit的Maven Archetype為基礎。

頁面編輯器覆蓋同步

覆蓋的同步由cq.authoring.page類別提供的非常相同的變異觀測器保證。

Sling Model JSON Exported Structure Configuration

啟用路由功能時，假設SPA的JSON匯出包含應用程式的不同路由，這要歸功於AEM導覽元件的JSON匯出。 AEM導覽元件的JSON輸出可透過下列兩個屬性，在SPA的根頁面內容原則中設定：

  • structureDepth:與導出的樹的深度對應的編號
  • structurePatterns:與要導出的頁對應的regex的陣列的regex

這可在/conf/we-retail-journal/react/settings/wcm/policies/we-retail-journal/react/components/structure/page/root的SPA範例內容中顯示。

本頁內容