Η ανασύνθεση αναφέρεται στη διαδικασία της εκ νέου προσθήκης της συμπεριφοράς 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>
Αντί να ενσωματώσετε την JavaScript, μπορείτε να συμπεριλάβετε μια συνάρτηση ανασύνθεσης στο αρχείο σας render.js
και να επισημάνετε ότι το συστατικό στοιχείο απαιτεί ανασύνθεση κατά τον χρόνο εκτέλεσης, όταν επιστρέφετε τη μεταγλωττισμένη σήμανση. Αυτή η ανασύνθεση αποφεύγει τις επαναληπτικές ετικέτες <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); } }