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