Komponenthydrering

Hydrering refererer til prosessen med å legge tilbake JavaScript-atferden i den kompilerte HTML-en på siden når HTML-en blir gjengitt i nettleseren.

Hvis du for eksempel har to komponenter på siden som du vil gjengi som overordnet/underordnet, og deretter klikker på et element i den overordnede komponenten, må detaljkomponenten oppdateres. Dette håndteres av JavaScript som blir utført på siden. For at dette skal fungere, må du hydrere HTML-en for de to komponentene etter at de er gjengitt på siden, ved å legge til en behandler av on click-hendelser i elementene i den overordnede komponenten og en lytter i detaljkomponentbeholderen som blir gjengitt på nytt når on click-hendelsen forekommer, basert på nyttelasten som sendes i hendelsen.

Komponentkompilatorer setter inn HTML på siden. Hvis komponenten trenger ekstra JavaScript for at den skal bli utført under kjøring slik at ting som hendelsesbehandlere blir lagt til, kan du velge mellom å bruke linjebundet JavaScript eller hydreringsfunksjonen. Hvilken løsning du bør velge, kommer an på kravene dine.

Linjebundet JavaScript

Du kan sette inn en <script>-kode direkte i den returnerte kompilerte koden. Skriptet blir utført på samme måte som siden.

For eksempel:

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

Hydreringsfunksjon

I stedet for å linjebinde JavaScript kan du inkludere en hydreringsfunksjon i filen render.js. Legg merke til at komponenten trenger hydrering under kjøring når du returnerer den kompilerte koden. Denne hydreringen forhindrer gjentakende <script>-koder og gjør det mulig for deg å benytte eksisterende JavaScript-kode til å administrere hendelser.

Selv om filen render.js lastes, blir funksjonen render() ikke kalt under hydreringen. Bare funksjonen hydrate() blir kalt.

Merknad:

Hvis en kompilert komponent ikke gir beskjed om at den trenger hydrering, blir filen render.js for komponenten aldri lastet.

Den egendefinerte kompilatoren for innholdoppsett hadde for eksempel blitt returnert med - { hydrate: true }.

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

I tillegg kan den egendefinerte kompilatoren, hvis det er nødvendig, legge til hydreringsegenskaper som den kommer til å se etter under kjøring. For eksempel:

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

Og til slutt, hvis en komponent angir at den trenger hydrering, blir filen render.js for komponenten lastet under kjøring, og funksjonen hydrate() blir kalt, slik at <div> for beholderen som inneholder den kompilerte koden, blir sendt inn.

For render.js kan du for eksempel se funksjonen 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);
        }
    }