Sedeloading componente

Panoramica

Il sideloading dei componenti di Communities è utile quando una pagina Web è progettata come un'app semplice a pagina singola che modifica dinamicamente ciò che viene visualizzato a seconda di ciò che è selezionato dal visitatore del sito.

Questo si ottiene quando i componenti Community non esistono nel modello di pagina, ma vengono aggiunti dinamicamente dopo la selezione di un visitatore del sito.

Poiché il framework dei componenti social (SCF) ha una presenza leggera, vengono registrati solo i componenti SCF esistenti al momento del caricamento iniziale della pagina. Affinché un componente SCF aggiunto in modo dinamico possa essere registrato dopo il caricamento della pagina, è necessario richiamare SCF per "trasferire localmente" il componente.

Quando una pagina è progettata per trasferire localmente componenti di Communities, è possibile memorizzare nella cache l’intera pagina.

I passaggi per aggiungere dinamicamente i componenti SCF sono i seguenti:

  1. Aggiungere il componente al DOM

  2. Spostare localmente il componente utilizzando uno dei due metodi seguenti:

NOTA

Il sideloading di risorse non esistenti non è supportato.

Aggiunta dinamica di un componente al DOM

Sia che il componente sia incluso in modo dinamico o caricato in modo dinamico, deve prima essere aggiunto al DOM.

Quando aggiungete il componente SCF, il tag più comune da usare è il tag DIV, ma possono essere utilizzati anche altri tag. Poiché SCF esamina il DOM solo quando la pagina viene inizialmente caricata, l’aggiunta al DOM passerà inosservata fino a quando SCF non viene richiamato in modo esplicito.

Qualsiasi tag viene utilizzato, come minimo, l'elemento deve essere conforme al normale pattern dell'elemento principale SCF, contenente i due attributi seguenti:

  • data-component-
    idPercorso effettivo del componente aggiunto

  • data-scf-
    componentIl resourceType del componente

Esempio di un componente per commenti aggiunto:

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

Trasferimento locale richiamando SCF

Inclusione dinamica

L’inclusione dinamica utilizza una richiesta boostrap che consente a SCF di esaminare il DOM e avviare il rapping di tutti i componenti SCF presenti nella pagina.

Per inizializzare i componenti SCF in qualsiasi momento dopo il caricamento della pagina, è sufficiente attivare un evento JQuery come indicato di seguito:

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

Caricamento dinamico

Il caricamento dinamico consente di controllare il caricamento dei componenti SCF.

Invece di avviare tutti i componenti SCF presenti nel DOM, è possibile specificare un componente SCF specifico da caricare utilizzando questo metodo JavaScript:

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

Dove someId è il valore dell'attributo data-component-id.

In questa pagina