Ανασύνθεση συστατικών στοιχείων

Μπορείτε να εισαγάγετε μια ετικέτα <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().

Για παράδειγμα, το προσαρμοσμένο εργαλείο μεταγλώττισης διάταξης περιεχομένου θα επιστρέψει με το - { 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);
        }
    }