Descarga de componentes component-sideloading

Información general overview

La descarga de componentes de Communities es útil cuando una página web está diseñada como una aplicación sencilla de una sola página que modifica dinámicamente lo que se muestra según 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 agregan dinámicamente después de la selección de un visitante del sitio.

Dado que el marco de trabajo de componentes sociales (SCF) tiene una presencia ligera, solo se registran los componentes SCF que existen en el momento de la carga inicial de la página. Para que se registre un componente SCF agregado dinámicamente después de la carga de página, se debe invocar SCF para "sideload" el componente.

Cuando se diseña una página para descargar de forma secundaria los componentes de las comunidades, es posible almacenar en caché la página completa.

Los pasos para añadir dinámicamente componentes de SCF son los siguientes:

  1. Añadir el componente al DOM

  2. Descarga del componente mediante uno de estos dos métodos:

NOTE
Descarga de recursos no existentes no es compatible.

Añadir componente de forma dinámica al 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 utiliza 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 pasará desapercibida hasta que se invoque explícitamente a SCF.

Independientemente de la etiqueta que se utilice, el elemento debe ajustarse, como mínimo, al patrón normal de elemento raíz de SCF, ya que contiene 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 agregado:

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

Descarga al invocar SCF sideload-by-invoking-scf

Inclusión dinámica dynamic-inclusion

La inclusión dinámica utiliza una solicitud de bootstrap que hace que SCF examine el DOM y arranque todos los componentes SCF encontrados en la página.

Para inicializar los componentes SCF en cualquier momento después de cargar la página, simplemente active un evento JQuery de esta manera:

$(document).trigger(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 encontrados en el DOM, es posible especificar un componente SCF específico para cargar mediante este método de JavaScript:

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

Donde someId es el valor de data-component-id atributo.

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