Komponentenhydrierung

Als Hydrierung wird der Prozess bezeichnet, bei dem das JavaScript-Verhalten wieder der kompilierten HTML auf der Seite hinzugefügt wird, wenn die HTML im Browser gerendert wird.

Beispiel: Die Seite enthält zwei Komponenten, die als Master/Detail gerendert werden sollen, und beim Klicken auf ein Element im Master soll die Detailkomponente aktualisiert werden. All das wird von JavaScript-Code verarbeitet, der auf der Seite ausgeführt wird. Damit das funktioniert, müssen Sie die HTML für die beiden Komponenten hydrieren, nachdem sie auf der Seite gerendert wurden. Dazu fügen Sie einen on click-Event-Handler zu den Elementen in der Masterkomponente und einen Listener im Detailkomponentencontainer hinzu. Dadurch wird das Rendering beim on click-Ereignis basierend auf der im Ereignis übergebenen Payload wiederholt.

Komponenten-Compiler fügen HTML in die Seite ein. Wenn für Ihre Komponente zusätzlicher JavaScript-Code zur Laufzeit ausgeführt werden muss, um z.B. Event-Handler hinzuzufügen, stehen Ihnen zwei Optionen zur Verfügung: Inline-JavaScript oder die Funktion "Hydrieren". Welche Lösung für Sie die Richtige ist, hängt von Ihren Anforderungen ab.

Inline-JavaScript

Sie können ein <script>-Tag direkt in das zurückgegebene kompilierte Markup einfügen. Das Skript wird beim Ausführen der Seite ausgeführt.

Beispiel:

<script src="/_sitesclouddelivery/renderer/libs/scs-core/jssor-
slider/js/jssor.slider.min.js" type="text/javascript"></script>
<div id="slider_container_c46b122d-978a-429d-aa25-9b5698428f6f" 
style="position: relative; top: 0px; left: 0px; height: 400px; width: 600px;
background-color: rgb(68, 68, 68); visibility: visible;" data-jssor-
slider="1">
. . .
</div>
<script>
        (function () {
            // get the required options
            var options = 
{"$FillMode":2,"$AutoPlay":false,"$AutoPlayInterval":3000,"$SlideDuration":50
0,"$ArrowKeyNavigation":true,"$HWA":false,"$BulletNavigatorOptions":{"$Chance
ToShow":1,"$AutoCenter":1,"$SpacingX":5},"$ArrowNavigatorOptions":{"$ChanceTo
Show":1,"$AutoCenter":2,"$Steps":1},"$ThumbnailNavigatorOptions":{"$ChanceToS
how":0,"$DisplayPieces":7,"$SpacingX":8,"$ParkingPosition":240}};

            // select the JSSOR value options
            options.$BulletNavigatorOptions.$Class = $JssorBulletNavigator$;
            options.$ArrowNavigatorOptions.$Class = $JssorArrowNavigator$;
            options.$ThumbnailNavigatorOptions.$Class = 
$JssorThumbnailNavigator$;

            // create the slider
            var slider = new $JssorSlider$("slider_container_c46b122d-978a-
429d-aa25-9b5698428f6f", options);
  
            // resize, maintaining aspect ratio
            var container = slider.$Elmt.parentElement;
            if (container) {
                 slider.$ScaleWidth(container.getBoundingClientRect().width);
            }
        })();
    </script>

Hydrierungsfunktion

Anstatt den JavaScript-Code inline einzufügen, können Sie eine Hydrierungsfunktion in die Datei render.js aufnehmen und angeben, dass die Komponente zur Laufzeit hydriert werden muss, wenn Sie das kompilierte Markup zurückgeben. Durch diese Hydrierung werden wiederholte <script>-Tags vermieden, und Sie können Ereignisse mit vorhandenem JavaScript-Code verwalten.

Auch wenn die Datei render.js geladen wird, wird die render()-Funktion bei der Hydrierung nicht aufgerufen. Nur die hydrate()-Funktion wird aufgerufen.

Hinweis:

Wenn eine kompilierte Komponente nicht angibt, dass die Hydrierung erforderlich ist, wird die Datei render.js der Komponente nie geladen.

Beispiel: Der benutzerdefinierte Inhaltslayout-Compiler gibt dann - { hydrate: true } zurück.

return Promise.resolve({
    content: compiledContent,

    hydrate: true // note that we want to hydrate this component using the 
render.js hydrate() function. This is required for when the user clicks on 
the author
});

Außerdem kann der benutzerdefinierte Compiler bei Bedarf hydrate-Eigenschaften hinzufügen, die zur Laufzeit gesucht werden. Beispiel:

Compiler: 
        // calculate the hydrate data
        content.hydrateData = JSON.stringify({
            contentId: content.id,
            authorName: content.fields['starter-blog-author_name']
        });
. . .

Template: 
<div class="author-container" data-hydrate="{{hydrateData}}">

Wenn eine Komponente schließlich angibt, dass die Hydrierung erforderlich ist, wird die Datei render.js der Komponente geladen und die hydrate()-Funktion aufgerufen. Dabei wird der Container <div> mit dem kompilierten Markup übergeben.

Beispiel: render.js. Siehe hydrate()-Funktion:

function selectAuthor(parentObj, contentId, authorName) {
    var $parentObj = $(parentObj);
    $parentObj.find(".author-name").click($.proxy(function () {
        $(".author-name").removeClass('author-selected');
        $(event.target).addClass('author-selected');
    }, self));
    if (window.location.href.indexOf("default=" + contentId) >= 0) {
        $(".author-name").each(function () {
            if (this.innerText === authorName) {
                $(this).addClass('author-selected');
            }
        });
    }
}
. . .
 
 
    hydrate: function (parentObj) {
        var $parentObj = $(parentObj),
            hydrateData = $parentObj.find('.author-container').attr('data-
hydrate');
        if (hydrateData) {
            var data = JSON.parse(hydrateData);
            selectAuthor(parentObj, data.contentId, data.authorName);
        }
    },
    render: function (parentObj) {
    . . .
        try {
            // Mustache
            template = Mustache.render(templateHtml, content);
 
            if (template) {
                $(parentObj).append(template);
            }
            selectAuthor(parentObj, this.contentItemData.id, 
content.fields['starter-blog-author_name']);
        } catch (e) {
            console.error(e.stack);
        }
    }