Show Menu
THEMEN×

Komponenten-Sideloading

Überblick

Das Sideloading von Communities-Komponenten ist nützlich, wenn eine Webseite als einfache Einzelseitenanwendung entworfen wird, die dynamisch ändert, was angezeigt wird, je nachdem, was vom Site-Besucher ausgewählt wird.
Dies geschieht, wenn Communities-Komponenten nicht in der Seitenvorlage vorhanden sind, sondern nach der Auswahl eines Site-Besuchers dynamisch hinzugefügt werden.
Da das Social-Komponenten-Framework (SCF) eine leichte Präsenz aufweist, werden nur SCF-Komponenten registriert, die zum Zeitpunkt des ersten Seitenladevorgangs vorhanden sind. Damit eine dynamisch hinzugefügte SCF-Komponente nach dem Laden der Seite registriert werden kann, muss SCF aufgerufen werden, um die Komponente zu "sideload"zu laden.
Wenn eine Seite zum Sideloading von Communities-Komponenten konzipiert ist, kann die gesamte Seite zwischengespeichert werden.
Die Schritte zum dynamischen Hinzufügen von SCF-Komponenten sind:
  1. Laden Sie die Komponente mit einer der beiden Methoden herunter:
Sideloading nicht vorhandener Ressourcen wird nicht unterstützt.

Dynamische Hinzufügen von Komponenten zu DOM

Unabhängig davon, ob die Komponente dynamisch eingeschlossen oder dynamisch geladen wird, muss sie zunächst dem DOM hinzugefügt werden.
Beim Hinzufügen der SCF-Komponente wird am häufigsten das DIV-Tag verwendet, es können aber auch andere Tags verwendet werden. Da SCF das DOM nur beim erstmaligen Laden der Seite prüft, wird diese Ergänzung zum DOM nicht bemerkt, bis SCF explizit aufgerufen wird.
Welches Tag verwendet wird, das Element muss mindestens dem normalen SCF-Stammelementmuster entsprechen, indem es die beiden folgenden Attribute enthält:
  • data-component-id
    Der effektive Pfad zur hinzugefügten Komponente.
  • data-scf-component
    Der resourceType der Komponente.
Im Folgenden finden Sie ein Beispiel für eine hinzugefügte Kommentarkomponente:
<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 durch Aufrufen von SCF

Dynamische Integration

Die dynamische Integration verwendet eine Bootstrap-Anforderung, die dazu führt, dass SCF das DOM prüft und alle auf der Seite gefundenen SCF-Komponenten bootet.
Um SCF-Komponenten nach dem Laden der Seite zu initialisieren, starten Sie einfach ein JQuery-Ereignis wie folgt:
$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);

Dynamisches Laden

Dynamisches Laden bietet Kontrolle über das Laden von SCF-Komponenten.
Anstatt alle im DOM gefundenen SCF-Komponenten zu bootstrapping durchzuführen, können Sie eine bestimmte SCF-Komponente angeben, die mit dieser JavaScript-Methode geladen werden soll:
SCF.addComponent(document.getElementById(*someId*));
Dabei someId ist der Wert des data-component-id Attributs.