Carga de componentes component-sideloading
Información general overview
La carga lateral de componentes de Communities resulta útil cuando una página web está diseñada como una aplicación de página simple y única que modifica dinámicamente lo que se muestra en función de lo que seleccione el visitante del sitio.
Esto se logra cuando los componentes de Communities no existen en la plantilla de página, sino que se añaden de forma dinámica tras la selección de un visitante del sitio.
Dado que el marco de componentes sociales (SCF) tiene una presencia ligera, solo se registran los componentes de SCF que existen en el momento de la carga inicial de la página. Para que un componente SCF añadido dinámicamente se registre después de la carga de página, se debe invocar SCF para "cargar" el componente.
Cuando una página está diseñada para cargar componentes de Communities, es posible almacenar en caché toda la página.
Los pasos para agregar componentes SCF de forma dinámica son:
-
Carga del componente utilizando uno de estos dos métodos:
- Inclusión dinámica
- Agrupar todos los componentes añadidos dinámicamente
- Carga dinámica
- Añadir un componente específico bajo demanda
Añadir dinámicamente un componente a DOM dynamically-add-component-to-dom
Tanto si el componente se incluye dinámicamente como si se carga dinámicamente, primero debe agregarse al DOM.
Al añadir el componente SCF, la etiqueta más común que se debe utilizar es la etiqueta DIV, pero también se pueden utilizar otras etiquetas. Dado que SCF solo examina el DOM cuando la página se carga inicialmente, esta adición al DOM pasa desapercibida hasta que se invoque explícitamente SCF.
Sea cual sea la etiqueta utilizada, como mínimo, el elemento debe cumplir el patrón de elemento raíz SCF normal al contener estos dos atributos:
-
data-component-id
La ruta efectiva al componente añadido -
data-scf-component
El resourceType del componente
A continuación se muestra un ejemplo de un componente de comentarios añadido:
<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>
Carga secundaria mediante invocación de SCF sideload-by-invoking-scf
Inclusión dinámica dynamic-inclusion
La inclusión dinámica utiliza una solicitud de ampliación que hace que SCF examine el DOM y arranque todos los componentes SCF que se encuentran en la página.
Para inicializar los componentes SCF en cualquier momento después de la carga de la página, simplemente active un evento JQuery de esta manera:
$(document).déclencheur(SCF.events.BOOTSTRAP_REQUEST);
Carga dinámica dynamic-loading
La carga dinámica proporciona control sobre la carga de componentes SCF.
En lugar de arrancar todos los componentes SCF que se encuentran en el DOM, es posible especificar un componente SCF específico para cargar mediante este método JavaScript:
SCF.addComponent(document.getElementById(someId);
Donde someId es el valor de la variable data-component-id atributo.