Sideload do componente component-sideloading

Visão geral overview

O sideload do componente Communities é útil quando uma página da Web é projetada como um aplicativo simples de página única que altera dinamicamente o que é exibido, dependendo do que é selecionado pelo visitante do site.

Isso é feito quando os componentes das Comunidades não existem no modelo de página, mas são adicionados dinamicamente após a seleção de um visitante do site.

Como a estrutura do componente social (SCF) tem uma presença leve, somente os componentes SCF existentes no momento do carregamento da página inicial são registrados. Para que um componente SCF adicionado dinamicamente seja registrado após o carregamento da página, o SCF deve ser chamado para "sideload" do componente.

Quando uma página é projetada para fazer o sideload de componentes do Communities, é possível armazenar a página inteira em cache.

As etapas para adicionar componentes SCF dinamicamente são:

Adicionar dinamicamente o componente ao DOM dynamically-add-component-to-dom

Se o componente for incluído dinamicamente ou carregado dinamicamente, ele deverá ser adicionado primeiro ao DOM.

Ao adicionar o componente SCF, a tag mais comum a ser usada é a tag DIV, mas outras tags também podem ser usadas. Como o SCF só examina o DOM quando a página é carregada inicialmente, essa adição ao DOM passará despercebida até que o SCF seja chamado explicitamente.

Independentemente da tag usada, no mínimo, o elemento deve estar em conformidade com o padrão normal do elemento raiz do SCF, contendo estes dois atributos:

Veja a seguir um exemplo de um componente de comentários adicionado:

<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 chamando o SCF sideload-by-invoking-scf

Inclusão dinâmica dynamic-inclusion

A inclusão dinâmica usa uma solicitação de inicialização que resulta no exame do DOM pelo SCF e na inicialização de todos os componentes do SCF encontrados na página.

Para inicializar componentes SCF a qualquer momento após o carregamento da página, basta acionar um evento JQuery como este:

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

Carregamento dinâmico dynamic-loading

O carregamento dinâmico fornece controle sobre o carregamento de componentes SCF.

Em vez de inicializar todos os componentes SCF encontrados no DOM, é possível especificar um componente SCF específico para carregar usando este método JavaScript:

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

Onde someId é o valor de data-component-id atributo.