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:

NOTE
Das Sideloading nicht vorhandenen Ressourcen wird nicht unterstützt.

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.

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791