元件側載

概觀

將網頁設計為簡單的單頁應用程式時，會根據網站訪客所選取的項目動態變更顯示內容，Communities元件側載相當實用。

當頁面範本中不存在Communities元件，而是依網站訪客的選擇以動態方式新增時，就會完成此作業。

由於社交元件框架(SCF)具有輕量級存在，因此只註冊初始頁面載入時存在的SCF元件。 要在頁面載入後註冊動態添加的SCF元件，必須調用SCF以「側載」該元件。

設計用來側載Communities元件的頁面時，可以快取整個頁面。

動態添加SCF元件的步驟如下：

1. 將元件新增至DOM

2. 側載元件 使用下列兩種方法之一：

• 動態包含
  • 引導所有動態添加的元件
• 動態載入
  • 按需添加一個特定元件

動態新增元件至DOM

無論元件是動態包含或動態載入，必須先將其新增至DOM。

新增SCF元件時，最常使用的標籤是DIV標籤，但也可以使用其他標籤。 由於SCF只會在頁面最初載入時檢查DOM，因此在明確叫用SCF之前，DOM的這項新增內容不會被察覺。

無論使用什麼標籤，元素至少必須包含以下兩個屬性，以符合正常的SCF根元素模式：

• data-component-id

  新增元件的有效路徑。

• data-scf-component

  元件的resourceType。

以下是新增備注元件的範例：

<div
    class="scf-commentsystem scf translation-commentsystem"
    data-component-id="<%= currentPage.getPath()%>/jcr:content/content-left/comments"
    data-scf-component="social/commons/components/hbs/comments"
>
</div>

調用SCF進行側載

動態包含

動態包含使用引導請求，導致SCF檢查DOM並引導頁面上找到的所有SCF元件。

若要在頁面載入後隨時初始化SCF元件，只需引發JQuery事件，如下所示：

$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);

動態載入

動態載入可以控制載入SCF元件。

可以指定特定的SCF元件來使用此JavaScript方法載入，而不是引導在DOM中找到的所有SCF元件：

SCF.addComponent(document.getElementById(*someId*));

其中 someId 是 data-component-id 屬性。

Business.Adobe.com 資源

Multichannel Communication Responsive Forms Managed Cloud Content As A Service Dynamic Media Digital Asset Management