การไฮเดรตหมายถึงกระบวนการเพิ่มการทำงานของ JavaScript กลับเข้าไปใน HTML ที่คอมไพล์ในเพจเมื่อ HTML แสดงผลในเบราเซอร์
ตัวอย่างเช่น หากคุณมีองค์ประกอบสองรายการบนเพจที่คุณต้องการแสดงผลเป็นรายการหลัก/รายละเอียด การคลิกรายการในรายการหลักจะต้องอัปเดตองค์ประกอบรายละเอียด ซึ่งทั้งหมดนี้จะจัดการโดย JavaScript ที่รันในเพจ เพื่อให้ได้ผล คุณต้องไฮเดรต HTML สำหรับองค์ประกอบสองรายการหลังจากที่ได้แสดงผลไปยังเพจด้วยการเพิ่มแฮนด์เลอร์ของอีเวนต์ เมื่อคลิก
ไปยังอีลิเมนต์ในองค์ประกอบหลักและลิสเทนเนอร์ในคอนเทนเนอร์องค์ประกอบรายละเอียด เพื่อแสดงผลอีกครั้งเมื่ออีเวนต์ เมื่อคลิก
เกิดขึ้นตามเพย์โหลดที่ระบุในอีเวนต์
คอมไพเลอร์องค์ประกอบจะแทรก HTML ลงในเพจ หากองค์ประกอบของคุณต้องการให้รัน JavaScript เพิ่มเติมขณะรันไทม์เพื่อเพิ่มในสิ่งต่างๆ เช่น แฮนด์เลอร์ของอีเวนต์ คุณจะมีสองตัวเลือก ได้แก่ JavaScript แบบอินไลน์หรือฟังก์ชันไฮเดรต โซลูชันที่คุณเลือกจะขึ้นอยู่กับความต้องการของคุณ
คุณสามารถแทรกแท็ก <script> ไปยังมาร์คอัปที่คอมไพล์ที่ส่งคืนได้โดยตรง สคริปต์จะรันเป็นการรันเพจ
ตัวอย่างเช่น:
<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>
คุณสามารถรวมฟังก์ชันแปลงสถานะในไฟล์ render.js
ของคุณแทนการอินไลน์ JavaScript และโปรดทราบว่าองค์ประกอบต้องมีการแปลงสถานะขณะรันไทม์ เมื่อคุณส่งคืนมาร์คอัปที่คอมไพล์ ซึ่งการแปลงสถานะนี้จะหลีกเลี่ยงแท็ก <script>
ที่เกิดซ้ำ และช่วยให้คุณใช้ประโยชน์จากรหัส JavaScript ที่มีอยู่ในการจัดการอีเวนต์ต่างๆ ได้
แม้ว่าจะโหลดไฟล์ render.js
แล้ว แต่ฟังก์ชัน render()
ไม่ได้ถูกเรียกระหว่างการแปลงสถานะ โดยจะเรียกเฉพาะฟังก์ชัน hydrate()
เท่านั้น
หมายเหตุ:
หากองค์ประกอบที่คอมไพล์ไม่ได้แจ้งว่าต้องการการแปลงสถานะ ระบบจะไม่โหลดไฟล์render.js
ขององค์ประกอบตัวอย่างเช่น คอมไพเลอร์เลย์เอาต์ของเนื้อหาที่กำหนดเองอาจแสดง - { 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 });
นอกจากนี้ คอมไพเลอร์ที่กำหนดเองสามารถเพิ่มคุณสมบัติ แปลงสถานะ ที่ต้องการใช้ในขณะรันไทม์ได้ หากต้องการ ตัวอย่างเช่น:
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}}">
ในขั้นตอนสุดท้าย หากองค์ประกอบต้องการใช้การแปลงสถานะ ระบบจะโหลดไฟล์ render.js
ขององค์ประกอบขณะรันไทม์และเรียกฟังก์ชัน hydrate()
และส่งผ่านในคอนเทนเนอร์ <div>
ที่มีมาร์คอัปที่คอมไพล์
ตัวอย่างเช่น render.js
โปรดดูฟังก์ชัน 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); } }