Sideload do componente

Visão geral

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

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

Como o SCF (Social Component Framework) tem uma presença leve, somente os componentes do SCF que existem 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 sideload dos componentes das Comunidades, é possível fazer o cache de toda a página.

As etapas para adicionar dinamicamente componentes SCF são:

  1. Adicionar o componente ao DOM

  2. Carregue o componente de maneira auxiliar usando um dos dois métodos:

OBSERVAÇÃO

Não há suporte para sideload de recursos não existentes.

Adicionar componente dinamicamente ao DOM

Independentemente de o componente ser incluído dinamicamente ou carregado dinamicamente, ele deve primeiro ser adicionado 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 examina somente o DOM quando a página é carregada inicialmente, essa adição ao DOM passará despercebida até que o SCF seja explicitamente chamado.

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

  • data-component-
    idO caminho efetivo para o componente adicionado

  • data-scf-
    componentO resourceType do componente

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

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

Carregamento auxiliar chamando SCF

Inclusão dinâmica

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

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

$(documento).trigger(SCF.eventos.BOOTSTRAP_REQUEST);

Carregamento dinâmico

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

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

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

Em que someId é o valor do atributo data-component-id.

Nesta página