Komponentin hydraatio

Hydraatiolla tarkoitetaan prosessia, jossa JavaScript-toiminta lisätään takaisin sivun käännettyyn HTML:ään, kun HTML muodostetaan selaimessa.

Jos sinulla on sivulla esimerkiksi kaksi komponenttia, jotka haluat muodostaa pää-/osakomponenttina, pääkomponentin kohteen napsauttamisen on päivitettävä osakomponentti. Tämä kaikki käsitellään JavaScriptillä, joka suorittaa sivun. Jotta tämä toimisi, sinun on hydratoitava kyseisten komponenttien HTML sen jälkeen, kun ne on muodostettu sivulla. Se tapahtuu siten, että lisäät Napsautettaessa-tapahtumankäsittelijän pääkomponentin elementteihin ja kuuntelijan osakomponentin säilöön, jotta se voidaan muodostaa uudelleen, kun Napsautettaessa-tapahtuma tapahtuu tapahtumassa välitettyjen käsiteltyjen tietojen perusteella.

Komponentin kääntäjät lisäävät HTML:n sivulle. Jos komponentti vaatii lisää JavaScriptiä, jotta se voidaan suorittaa ajonaikaisesti esimerkiksi tapahtumankäsittelijöiden lisäämistä varten, käytössäsi on pari vaihtoehtoa: sisäinen JavaScript ja Hydraatio-funktio. Ratkaisu valitaan vaatimusten mukaan.

Rivinsisäinen JavaScript

Voit lisätä <script>-tunnisteen suoraan palautettuun käännettyyn merkintään. Komentosarja suoritetaan samalla kun sivu suoritetaan.

Esimerkki:

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

Hydraatiofunktio

Sen sijaan että määrittäisit sisäisen kehyksen JavaScriptille, voit lisätä hydraatiofunktion render.js-tiedostoon. Ota huomioon, että komponentti vaatii hydraation ajon aikana, kun palautat käännetyn merkinnän. Tämä hydraatio välttää toistuvia <script>-tunnisteita, ja sen avulla voidaan hyödyntää olemassa olevaa JavaScript-koodia tapahtumien hallinnassa.

Vaikka render.js-tiedosto on ladattu, render()-funktiota ei kutsuta hydraation aikana. Vain hydrate()-kutsutaan.

Huomautus::

Jos käännetty komponentti ei vaadi hydraatiota, komponentin render.js-tiedostoa ei ladata koskaan.

Esimerkiksi mukautettu sisällön asettelun kääntäjä palauttaisi arvon - { 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
});

Lisäksi mukautettu kääntäjä voi tarvittaessa lisätä hydrate-ominaisuuksia, joita se etsii ajon aikana. Esimerkki:

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

Jos komponentti huomaa tarvitsevansa hydraation, komponentin render.js-tiedosto ladataan ajon aikana ja kutsutaan hydrate()-funktio. Samalla välitetään säilö <div>, joka sisältää käännetyn merkinnän.

Esimerkiksi render.js-tiedosto - katso hydrate()-toiminto:

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