Sideload de Componente component-sideloading

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Visão geral overview

O sideload do componente 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 é selecionado pelo visitante do site.

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

Como a estrutura de componentes sociais (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 dos componentes do Communities, é possível fazer o cache de toda a página.

As etapas para adicionar dinamicamente componentes SCF são:

NOTE
Sideload de recursos não existentes não é suportado.

Adicionar componente dinamicamente ao DOM dynamically-add-component-to-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 apenas o DOM quando a página é carregada inicialmente, essa adição ao DOM passa despercebida até que o SCF seja chamado explicitamente.

Qualquer tag usada, no mínimo, o elemento deve estar em conformidade com o padrão normal do elemento raiz SCF contendo esses 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 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>

Sideload chamando SCF sideload-by-invoking-scf

Inclusão dinâmica dynamic-inclusion

A inclusão dinâmica usa uma solicitação de reforço que resulta na análise do SCF no DOM 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 disparar 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 bootstrapping 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(document.getElementById(someId);

Onde someId é o valor da variável data-component-id atributo.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6