Hydratation de composant

Par "hydratation", on entend le processus d'ajout du comportement JavaScript dans le code HTML compilé de la page lorsque le code HTML est affiché dans le navigateur.

Par exemple, si la page contient deux composants que vous souhaitez afficher en tant que maître/détails, si un élément du composant maître est activé par clic, le composant de détails doit être mis à jour. Le tout est géré par le code JavaScript exécuté sur la page. Afin que cela fonctionne, vous devez hydrater le code HTML pour les deux composants après leur affichage sur la page en ajoutant un gestionnaire d'événements on click aux éléments du composant maître et un processus d'écoute sur le conteneur de composant de détails pour le réafficher lorsque l'événement on click survient en fonction des données traitées transmises dans l'événement.

Les compilateurs de composant insèrent le code HTML dans la page. Si votre composant requiert l'exécution d'un code JavaScript supplémentaire lors de de l'exécution afin d'ajouter des éléments tels que des gestionnaires d'événements, vous disposez de deux options : un code JavaScript incorporé ou la fonction d'hydratation. Choisissez l'une ou l'autre en fonction de vos besoins.

Code JavaScript incorporé

Vous pouvez insérer une balise <script> directement dans le balisage compilé renvoyé. Le script est exécuté en même temps que la page.

Par exemple :

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

Fonction hydrate()

Au lieu d'incorporer le code JavaScript, vous pouvez inclure une fonction d'hydratation dans votre fichier render.js. Le composant devra être hydraté à l'exécution lorsque vous renvoyez le balisage compilé. Ce processus d'hydratation permet d'éviter la répétition des balises <script> et vous permet de tirer parti du code JavaScript existant pour gérer les événements.

Même si le fichier render.js est chargé, la fonction render() n'est pas appelée pendant le processus d'hydratation. Seule la fonction hydrate() est appelée.

Remarque :

Si un composant compilé n'indique pas qu'une hydratation est requise, le fichier render.js du composant n'est pas chargé.

Par exemple, le compilateur de présentation de contenu personnalisé serait renvoyé avec - { 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
});

De plus, si besoin, le compilateur personnalisé peut ajouter des propriétés d'hydratation à rechercher lors de l'exécution. Par exemple :

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

Enfin, si un composant indique qu'une hydratation est requise, le fichier render.js du composant est chargé à l'exécution et la fonction hydrate() est appelée pour transmettre le conteneur <div>, qui contient le balisage compilé.

Par exemple, render.js - reportez-vous à la fonction 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);
        }
    }