Komponenten-Seitenladevorgang component-sideloading
Überblick overview
Das Laden von Communities-Komponenten ist nützlich, wenn eine Web-Seite als einfache Einzelseiten-App entworfen wurde, die die angezeigten Inhalte dynamisch ändert, je nachdem, was der Site-Besucher ausgewählt hat.
Dies wird erreicht, wenn in der Seitenvorlage keine Communities-Komponenten vorhanden sind, sondern nach der Auswahl durch einen Site-Besucher dynamisch hinzugefügt werden.
Da das Social Component Framework (SCF) nur sehr leicht vorhanden ist, 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 „seitenladen“.
Wenn eine Seite so konzipiert ist, dass Communities-Komponenten seitlich geladen werden, ist es möglich, die gesamte Seite zwischenzuspeichern.
Die Schritte zum dynamischen Hinzufügen von SCF-Komponenten sind:
-
Laden Sie die Komponenteeiner von zwei Methoden:
- Dynamische Einbindung
- Bootstrapping aller dynamisch hinzugefügten Komponenten
- Dynamisches Laden
- Hinzufügen einer bestimmten Komponente bei Bedarf
Dynamisches Hinzufügen einer Komponente zum DOM dynamically-add-component-to-dom
Unabhängig davon, ob die Komponente dynamisch eingeschlossen oder dynamisch geladen wird, muss sie zuerst dem DOM hinzugefügt werden.
Beim Hinzufügen der SCF-Komponente wird meist das DIV-Tag verwendet. Es können aber auch andere Tags verwendet werden. Da SCF das DOM nur beim ersten Laden der Seite untersucht, wird dieses Hinzufügen zum DOM unbemerkt bleiben, bis SCF explizit aufgerufen wird.
Unabhängig davon, welches Tag verwendet wird, muss das Element mindestens dem normalen SCF-Stammelementmuster entsprechen, indem es diese beiden 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 Komponente „Kommentare“:
<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>
Seitenladen durch Aufrufen von SCF sideload-by-invoking-scf
Dynamische Einbindung dynamic-inclusion
Die dynamische Einbindung verwendet eine Bootstrap-Anfrage, die dazu führt, dass SCF das DOM untersucht und alle auf der Seite gefundenen SCF-Komponenten mit Bootstrapping durchführt.
Um SCF-Komponenten jederzeit nach dem Laden der Seite zu initialisieren, lösen Sie einfach ein JQuery-Ereignis wie das folgende aus:
$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);
Dynamisches Laden dynamic-loading
Dynamisches Laden bietet Kontrolle über das Laden von SCF-Komponenten.
Anstatt alle im DOM gefundenen SCF-Komponenten per Bootstrapping zu aktivieren, können Sie mit dieser JavaScript-Methode eine bestimmte SCF-Komponente angeben, die geladen werden soll:
SCF.addComponent(document.getElementById(*someId*));
Dabei ist someId
der Wert des data-component-id
.