La hidratación hace referencia al proceso por el que se agrega de nuevo el comportamiento JavaScript al HTML compilado en la página cuando este se representa en el explorador.
Por ejemplo, si hay dos componentes en la página que quiere representar como principal/detalle, al hacer clic en un elemento del principal es necesario que actualice el componente de detalle. Todo esto lo gestiona JavaScript, que se ejecuta en la página. Para que esto funcione, hidrate el HTML de los dos componentes representados en la página agregando un manejador de eventos on click
a los elementos del componente principal y un listener al contenedor del componente de detalle para volver a representar cuando el evento on click
se produzca en función de la carga útil transferida en el evento.
Los compiladores de componentes insertan HTML en la página. Si el componente necesita que se ejecute JavaScript adicional en tiempo de ejecución para agregar elementos como manejadores de eventos, tendrá dos opciones: JavaScript en línea o la función de hidratación. La solución que elija depende de sus necesidades.
Puede insertar una etiqueta <script> directamente en el marcador compilado que se devuelve. El script se ejecutará cuando se ejecute la página.
Por ejemplo:
<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>
En lugar de insertar JavaScript, puede incluir una función de hidratación en el archivo render.js
e indicar que el componente necesita hidratación en tiempo de ejecución cuando devuelve el marcador compilado. Esta hidratación evita etiquetas <script>
repetitivas y le permite mejorar el código JavaScript existente para gestionar eventos.
Aunque el archivo render.js
esté cargado, no se llama a la función render()
durante la hidratación. Solo se llama a la función hydrate()
.
Nota:
Si un componente compilado no indica que necesita hidratación, el archivorender.js
del componente no se carga.Por ejemplo, el compilador de diseño de contenido personalizado se devolverá con - { 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 });
Además, si es necesario, el compilador personalizado puede agregar propiedades de hidratación que buscará en tiempo de ejecución. Por ejemplo:
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}}">
Por último, si un componente indica que necesita hidratación, entonces, en tiempo de ejecución, se cargará el archivo render.js
y se llamará a la función hydrate()
, transfiriendo el contenedor <div>
con el marcador compilado.
Por ejemplo, render.js
y la función 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); } }