元件側載

概觀

當網頁設計成簡單的單頁應用程式時，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元件。

您可以使用JavaScript方法指定特定SCF元件來載入，而不需啟動載入在DOM中找到的所有SCF元件：

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

位置 someId 是 data-component-id 屬性。

本頁內容