元件側載 component-sideloading

概觀 overview

當網頁設計成簡單的單頁應用程式時,Communities元件旁載會很有用,該應用程式會根據網站訪客的選取內容來動態地變更顯示內容。

當Communities元件不存在於頁面範本中,而是根據網站訪客的選擇以動態方式新增時,即可完成這項作業。

由於社交元件架構(SCF)具有輕量型存在,因此只會註冊初始頁面載入時存在的SCF元件。 若要在頁面載入後註冊動態新增的SCF元件,必須叫用SCF來「側載」元件。

當頁面設計為側載Communities元件時,可以快取整個頁面。

動態新增SCF元件的步驟如下:

  1. 將元件新增至DOM

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

NOTE
側載 非現有資源 不受支援。

動態新增元件至DOM dynamically-add-component-to-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進行側載 sideload-by-invoking-scf

動態包含 dynamic-inclusion

動態包含使用啟動載入要求,導致SCF檢查DOM並啟動頁面上的所有SCF元件。

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

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

動態載入 dynamic-loading

動態載入可讓您控制載入SCF元件。

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

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

位置 someIddata-component-id 屬性。

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791