Hidratarea componentelor

Hidratarea se referă la procesul de adăugare a comportamentului JavaScript în HTML-ul compilat din pagină, atunci când codul HTML se randează în browser.

De exemplu, dacă aveţi două componente pe pagina pe care doriţi să o randaţi ca Principală/Detalii, când faceţi clic pe un element din Principală trebuie să se actualizeze componenta Detalii. Totul este gestionat de codul JavaScript care se execută în pagina respectivă. Pentru a face acest lucru, este necesar să hidrataţi conţinutul HTML pentru cele două componente după ce s-au randat în pagină, prin adăugarea unei rutine pt. evenimente on click la elementele din componenta Principală şi a unui listener pe containerul componentei Detalii, pentru o randare din nou atunci când evenimentul on click are loc în funcţie de payload-ul transmis în cadrul evenimentului.

Compilatoarele componentelor inserează conţinutul HTML în cadrul paginii. În cazul în care componenta dvs. are nevoie ca un script JavaScript suplimentar să fie executat la runtime pentru a adăuga lucruri precum rutine pt. evenimente, atunci aveţi două opţiuni: script JavaScript în linie sau funcţia Hydrate. Soluţia pe care urmează să o alegeţi este în funcţie de cerinţele dvs.

JavaScript Inline

Puteţi insera un tag <script> direct în marcajul compilat returnat. Scriptul se va executa pe măsură ce se execută pagina.

De exemplu:

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

Funcţia Hydrate

În loc să faceţi inlining în JavaScript, puteţi include o funcţie hydrate în fişierul render.js şi reţineţi: componenta necesită hidratare la runtime atunci când returnaţi marcajul compilat. Hidratarea evită tagurile <script> repetate şi vă permite să utilizaţi codul JavaScript existent pt. a administra evenimente.

Deşi fişierul render.js este încărcat, funcţia render() nu este apelată în timpul hidratării. Este apelată doar funcţia hydrate().

Notă:

Dacă o componentă compilată nu semnalează că necesită hidratare, fişierul render.js al componentei nu este niciodată încărcat.

De exemplu, compilatorul de machetă de conţinut personalizat ar returna - { 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
});

În plus, dacă este nevoie, compilatorul personalizat poate adăuga proprietăţi hydrate pe care le va căuta la runtime. De exemplu:

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

În fine, dacă o componentă semnalează faptul că necesită hidratare, atunci, la runtime, fişierul render.js al componentei va fi încărcat şi funcţia hydrate() va fi apelată, trimiţând containerul <div> care conţine marcajul compilat.

De exemplu, render.js - a se vedea funcţia 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);
        }
    }