Componenthydratatie

Hydratatie verwijst naar het proces waarmee het JavaScript-gedrag weer aan de gecompileerde HTML op de pagina wordt toegevoegd wanneer de HTML in de browser wordt weergegeven.

Als u bijvoorbeeld twee componenten op de pagina hebt die u als master/detail wilt weergeven, dan moet de detailcomponent worden bijgewerkt als op een item in de master wordt geklikt. Dit wordt allemaal afgehandeld met JavaScript dat op de pagina wordt uitgevoerd. Om dit te bewerkstelligen, moet u de HTML voor de twee componenten hydrateren nadat deze op de pagina zijn weergegeven. Dat doet u door een eventhandler on click (bij klikken) toe te voegen aan de elementen in de mastercomponent en een listener toe te voegen aan de detailcomponentcontainer die opnieuw moet worden weergegeven wanneer het event on click optreedt op basis van de payload die bij het event wordt doorgegeven.

Met componentcompilers wordt HTML in de pagina ingevoegd. Als voor de component tijdens runtime aanvullende JavaScript-code moet worden uitgevoerd om zaken zoals eventhandlers in te voegen, kunt u kiezen tussen inline JavaScript en de functie 'Hydrate'. Welke oplossing u moet kiezen, hangt af van uw vereisten.

Inline-JavaScript

U kunt een <script>-tag rechtstreeks invoegen in de gecompileerde markup die is geretourneerd. Het script wordt uitgevoerd wanneer de pagina wordt uitgevoerd.

Bijvoorbeeld:

<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>

Hydratatiefunctie

In plaats van een inline-JavaScript kunt u ook een functie voor hydratatie (aanvullen met JavaScript-gedrag) opnemen in het bestand render.js. In dat geval moetde component tijdens runtime worden gehydrateerd, wanneer de gecompileerde markup wordt geretourneerd. Bij hydratatie zijn er niet steeds <script>-tags nodig en kunt u bestaande JavaScript-code gebruiken om events af te handelen.

Het bestand render.js wordt wel geladen, maar de functie render() wordt tijdens het hydrateren niet aangeroepen. Alleen de functie hydrate() wordt aangeroepen.

Opmerking:

Als voor een gecompileerde component geen hydratatie nodig is, wordt het bestand render.js voor die component niet geladen.

De aangepaste compiler voor inhoudlay-out zou dan bijvoorbeeld - { hydrate: true } retourneren.

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
});

Indien nodig kunnen door de aangepaste compiler bovendien hydratatie-eigenschappen worden toegevoegd waarnaar tijdens runtime wordt gezocht. Bijvoorbeeld:

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}}">

Ten slotte: als voor een component wel hydratatie is vereist, wordt het bestand render.js van deze component geladen en wordt de functie hydrate() aangeroepen, waarbij de <div>-container met de gecompileerde markup wordt doorgegeven.

Bijvoorbeeld render.js - zie functie hydrate():

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);
        }
    }