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.
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>
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, komponentinrender.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); } }