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. hinzufügen der Komponente zum DOM

  2. Laden Sie die Komponente mit einer der beiden Methoden herunter:

HINWEIS

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

Dynamische Hinzufügen der Komponente 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-
    idDer effektive Pfad zur hinzugefügten Komponente

  • data-scf-
    componentDer 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:

$(Dokument).Trigger(SCF.Ereignisses.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(Dokument.getElementById(someId));

Dabei ist someId der Wert des Attributs data-component-id.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free