אתה מציג תוכן עזרה עבור גרסה:

Overview

Communities component sideloading is useful when a web page is designed as a simple, single page app that dynamically alters what is displayed depending on what is selected by the site visitor.  

This is accomplished when Communities components do not exist in the page template, but instead are dynamically added following a site visitor's selection.

Since the social component framework (SCF) has a lightweight presence, only SCF components that exist at the time of initial page load are registered.  For a dynamically added SCF component to be registered after page load, SCF must be invoked to "sideload" the component.

When a page is designed to sideload Communities components, it is possible to cache the entire page.

The steps to dynamically add SCF components are :

1) add the component to the DOM

2) sideload the component using one of two methods :

הערה:

Sideloading of non-existing resources is not supported.

Dynamically Add Component to DOM

Whether the component is dynamically included or dynamically loaded, it must first be added to the DOM.

When adding the SCF component, the most common tag to use is the DIV tag, but other tags may be used as well.  Because SCF only examines the DOM when the page initially loads, this addition to the DOM will go unnoticed until SCF is explicitly invoked.

Whatever tag is used, at a minimum, the element must conform to the normal SCF root element pattern by containing these two attributes :

  • data-component-id
    the effective path to the added component
  • data-scf-component
    the resourceType of the component

Following is one example of an added comments component :

<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>

Sideload by Invoking SCF

Dynamic Inclusion

Dynamic inclusion uses a boostrap request that results in SCF examining the DOM and bootsrapping all SCF components found on the page.

To initialize SCF components anytime after page load, simply fire a JQuery event like this:

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

Dynamic Loading

Dynamic loading provides control over loading SCF components.

Instead of bootstrapping all SCF components found in the DOM, it is possible to specify a specific SCF component to load using this JavaScript method :

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

Where someId is the value of the data-component-id attribute.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת