元件側載

概覽

當網頁設計為簡單的單一頁面應用程式時,社群元件側載會很有用,它會根據網站訪客選取的項目動態變更顯示的項目。

當頁面範本中不存在社群元件,但會在網站訪客選取後動態新增時,就會完成此動作。

由於社交元件框架(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元件的控制。

與其引導DOM中找到的所有SCF元件,您可以使用以下JavaScript方法指定要載入的特定SCF元件:

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

其中​someId​是​data-component-id​屬性的值。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now