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