Hydratacja składników

Terminem "hydratacja" (ang. hydration) jest określany proces dodawania kodu JavaScript do skompilowanego kodu HTML na stronie, gdy HTML jest renderowany w przeglądarce.

Na przykład, jeśli na stronie znajdują się dwa składniki, które mają być renderowane jako nadrzędny i podrzędny, to kliknięcie na elemencie w nadrzędnym wymaga aktualizacji składnika podrzędnego. Wszystko to jest obsługiwane przez kod JavaScript wykonywany na stronie. Aby to działało, trzeba po wyrenderowaniu obu tych składników hydratyzować ich kod HTML, dodając do elementów w składniku nadrzędnym procedurę obsługi zdarzenia on click oraz dodając nasłuch do składnika podrzędnego, aby był on ponownie renderowany (na podstawie ładunku przekazanego w zdarzeniu), gdy wystąpi zdarzenie on click.

Kod HTML jest wstawiany do strony przez kompilatory składników. Jeśli składnik wymaga dodatkowego kodu JavaScript, który ma zostać wykonany w trybie wykonawczym w celu dodania np. procedur obsługi zdarzeń, jest dostępnych kilka możliwości, w tym użycie wstawkowego kodu JavaScript lub funkcji hydratacji. Wybór rozwiązania zależy od wymagań użytkownika.

Wprowadzanie kodu JavaScript jako wstawkowego

Znacznik <script> można wstawić bezpośrednio w zwróconym, skompilowanym kodzie znacznikowym. Skrypt zostanie wykonany przy uruchomieniu strony.

Na przykład:

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

Funkcja hydratacji

Zamiast używać kodu JavaScript w postaci wstawkowej, można w swoim pliku render.js zawrzeć funkcję hydratacji oraz uwagę, że składnik wymaga hydratacji w trybie wykonawczym, gdy jest zwracany skompilowany kod znacznikowy. W ten sposób unika się powtarzania znaczników <script> i umożliwia wykorzystanie istniejącego kodu JavaScript do zarządzania zdarzeniami.

Nawet jeśli plik render.js zostanie załadowany, to jednak funkcja render() nie jest wywoływana podczas hydratacji. Wywoływana jest tylko funkcja hydrate().

Uwaga:

Jeśli skompilowany składnik nie informuje, że wymaga hydratacji, plik render.js składnika nigdy nie jest ładowany.

Na przykład niestandardowy kompilator układu zawartości zwraca - { 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
});

Ponadto, jeśli jest to wymagane, kompilator niestandardowy może dodać właściwości hydrate, które będzie wyszukiwał w trybie wykonawczym. Na przykład:

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

Na koniec, jeśli składnik poinformuje, że wymaga hydratacji, to w trybie wykonawczym zostanie załadowany plik render.js składnika i zostanie wywołana funkcja hydrate(), przekazując pojemnik <div> zawierający skompilowany kod znacznikowy.

Na przykład render.js z funkcją 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);
        }
    }