Idratazione dei componenti

L'idratazione è il processo durante il quale le caratteristiche di funzionamento JavaScript vengono aggiunte di nuovo nel codice HTML compilato nella pagina quando viene eseguito il rendering del codice HTML nel browser.

Se ad esempio si dispone nella pagina di due componenti da visualizzare come master/detail, quando si fa clic su un elemento nel componente master è necessario che il componente detail venga aggiornato. L'operazione è gestita dal codice JavaScript eseguita nella pagina. Affinché tutto ciò funzioni è necessario idratare il codice HTML dei due componenti dopo averli visualizzati nella pagina mediante l'aggiunta di un handler eventi on click agli elementi del componente master e un listener al contenitore del componente detail per eseguire di nuovo il rendering quando si verifica l'evento on click in base al payload passato nell'evento.

I compilatori dei componenti inseriscono il codice HTML nella pagina. Se il componente richiede codice JavaScript aggiuntivo da eseguire in runtime per l'aggiunta di elementi quali gli handler eventi, sono disponibili due soluzioni: JavaScript in linea o la funzione Hydrate. La soluzione da scegliere dipende dalle proprie esigenze.

JavaScript in linea

È possibile inserire una tag <script> direttamente nel markup compilato restituito. Lo script verrà eseguito all'esecuzione della pagina.

Ad esempio:

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

Funzione Hydrate

Anziché inserire in linea il codice JavaScript, è possibile includere una funzione Hydrate nel file render.js e prendere nota del fatto che il componente richiede l'idratazione in runtime quando si restituisce il markup compilato. L'idratazione evita le tag <script> ripetitive e consente di sfruttare il codice JavaScript esistente per gestire gli eventi.

Anche se il file render.js è stato caricato, la funzione render() non viene richiamata durante l'idratazione. Viene richiamata solo la funzione hydrate().

Nota:

Se un componente compilato non indica la necessita dell'idratazione, il file render.js del componente non verrà mai caricato.

Ad esempio, il compilatore di layout di contenuto personalizzato restituirebbe - { 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
});

Inoltre, se configurato, il compilatore personalizzato può aggiungere le proprietà hydrate che cercherà in runtime. Ad esempio:

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

Infine, se un componente necessita dell'idratazione, in runtime il file render.js del componente verrà caricato e la funzione hydrate() verrà chiamata, con il passaggio del contenitore <div> che contiene il markup compilato.

Ad esempio, render.js - vedere la funzione 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);
        }
    }