组件侧传

概述

将网页设计为简单的单页应用程序时,社区组件侧传非常有用,该应用程序会根据站点访客选择的内容动态更改显示的内容。

当页面模板中不存在社区组件,而是在站点访客选择后动态添加组件时,即可完成此操作。

由于社交组件框架(SCF)具有轻量级存在,因此只注册初始页面加载时存在的SCF组件。 要在页面加载后注册动态添加的SCF组件,必须调用SCF以“侧传”该组件。

当页面设计为侧传社区组件时,可以缓存整个页面。

动态添加SCF组件的步骤有:

  1. 将组件添加到DOM

  2. 使用以下 两种方法之一侧传组件:

注意

不支持对非现有资源进行侧传。

将组件动态添加到DOM

无论组件是动态包含的还是动态加载的,都必须先将其添加到DOM中。

添加SCF组件时,最常用的标签是DIV标签,但也可以使用其他标签。 由于SCF仅在页面初始加载时检查DOM,因此在显式调用SCF之前,对DOM的这一添加将不会引起注意。

无论使用什么标签,元素至少必须包含以下两个属性,以符合标准SCF根元素模式:

  • data-component-id

    添加的组件的有效路径。

  • 数据-scf组件

    组件的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*));

其中someIddata-component-id属性的值。

On this page

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