Sideload do componente

Última atualização em 2023-12-07
  • Tópicos
  • Communities
    Exibir mais informações sobre este tópico
  • Criado para:
  • User

Visão geral

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:

  1. Adicionar o componente ao DOM

  2. Sideload do componente usando um de dois métodos:

OBSERVAÇÃO

Sideload de recursos não existentes não é compatível.

Adicionar dinamicamente o componente ao 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:

  • data-component-id

    O caminho efetivo para o componente adicionado.

  • data-scf-component

    O resourceType do componente.

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

Inclusão dinâmica

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

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.

Nesta página