Összetevő hidratálása

A hidratálás JavaScript viselkedés hozzáadását jelenti az oldal lefordított HTML kódjához, amikor a HTML megjelenik a böngészőben.

Ha például két olyan összetevővel rendelkezik az oldalon, amelyeket fölérendelt/alárendelt kapcsolatban kíván megjeleníteni, akkor a fölérendeltben lévő elemre kattintáskor módosítani kell az alárendelt összetevőt. Mindezt az oldalon végrehajtott JavaScript kód kezeli. Ennek működéséhez az oldalon való megjelenítésük után hidratálnia kell a két összetevőhöz tartozó HTML kódot egy on click eseménykezelő hozzáadásával a fölérendelt összetevőben lévő elemekhez, valamint egy figyelő hozzáadásával az alárendelt összetevő tárolójához az újbóli megjelenítéshez, amikor az on click esemény az átadott adattörzs alapján bekövetkezik.

Az összetevő-fordítók HTML kódot szúrnak be az oldalra. Ha összetevőjének további JavaScript kódot kell végrehajtania futásidőben például eseménykezelők hozzáadásához, akkor két lehetősége van: JavaScript beágyazása vagy a hydrate függvény. Igényeinek megfelelően választhat megoldást.

A JavaScript beágyazása

Egy <script> címkét szúrhat be közvetlenül a visszaadott lefordított kódba. A parancsfájl végrehajtására az oldal végrehajtásakor kerül sor.

Például:

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

A hydrate függvény

A JavaScript kód beágyazása helyett felvehet egy hydrate függvényt a render.js fájlban, és ekkor megfigyelheti, hogy az összetevő hidratálást igényel futásidőben, amikor visszaadja a lefordított kódot. Ez a hidratálás elkerüli az ismétlődő <script> címkéket, és lehetővé teszi a meglévő JavaScript kód hasznosítását események kezeléséhez.

Még ha a render.js fájl be is van töltve, a render() függvényt nem hívja a rendszer a hidratálás során. Csak a hydrate() függvény hívására kerül sor.

Megjegyzés:

Ha egy lefordított összetevő nem jelzi, hogy hidratálásra van szüksége, akkor az összetevőhöz tartozó render.js fájl sohasem töltődik be.

Például az egyéni tartalomelrendezés fordítója a - { hydrate: true } eredményt adhatja vissza.

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

Emellett szükség szerint az egyéni fordító felveheti a hydrate tulajdonságait, amelyeket futásidőben fog keresni. Például:

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

Végül ha egy összetevő jelzi, hogy hidratálásra van szüksége, akkor futásidőben a render.js fájl be fog töltődni, és a hydrate() függvény hívására kerül sor, átadva a tároló lefordított kódot tartalmazó <div> elemét.

Példaként szolgáló render.js – lásd a hydrate() függvényt:

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