元件側載

概觀

當網頁設計成簡單的單頁應用程式時,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*));

位置 someIddata-component-id 屬性。

本頁內容