Bileşeni Veriyle Doldurma

Veriyle doldurma, HTML tarayıcıda görüntülenirken JavaScript davranışının sayfadaki derlenmiş HTML'e geri eklenmesi işlemidir.

Örneğin ana/detay olarak görüntülemek istediğiniz sayfada iki bileşeniniz varsa, ana bölümündeki bir öğeye tıklandığında detay bileşeninin güncellenmesi gerekir. Bunların hepsi sayfada yürütülen JavaScript tarafından idare edilir. Bunun çalışması için, ana bileşendeki öğelere bir on click olay işleyici ekleyerek ve olayda iletilen veri yüküne bağlı olarak on click olayı gerçekleştiğinde yeniden görüntülemek için detay bileşeni kapsayıcısına bir izleyici ekleyerek iki bileşen sayfada görüntülendikten sonra bu bileşenler için HTML'i veriyle doldurmanız gerekir.

Bileşen derleyicileri HTML'i sayfaya ekler. Bileşeniniz olay işleyicileri gibi şeyleri eklemek için çalıştırma zamanında ek JavaScript yürütülmesini gerektiriyorsa satır içi JavaScript veya Veriyle Doldurma fonksiyonu gibi seçenekleriniz vardır. Seçeceğiniz çözüm gereksinimlerinize bağlıdır.

Satır İçi JavaScript

Döndürülen derlenmiş işaretlemeye doğrudan bir <script> etiketi ekleyebilirsiniz. Sayfa yürütüldükçe komut listesi yürütülür.

Örneğin:

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

Veriyle Doldurma Fonksiyonu

JavaScript'i satır içi yapmak yerine render.js dosyanıza bir veriyle doldurma fonksiyonu ekleyebilirsiniz. Derlenmiş işaretlemeyi döndürürken bileşenin çalıştırma zamanında veriyle doldurma gerektirdiğine dikkat edin. Bu veriyle doldurma, tekrarlanan <script> etiketlerini önler ve olayları yönetmek için mevcut JavaScript kodundan yararlanmanıza olanak tanır.

render.js dosyası yüklense de veriyle doldurma sırasında render() fonksiyonu çağrılmaz. Sadece hydrate() fonksiyonu çağrılır.

Not:

Derlenmiş bir bileşen veriyle doldurma gerektirdiğini belirtmiyorsa bileşenin render.js dosyası hiçbir zaman yüklenmez.

Örneğin özel içerik yerleşimi derleyicisi - { hydrate: true } ile döner.

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
});

Ayrıca gerekirse özel derleyici çalıştırma zamanında arayacağı hydrate nitelikleri ekleyebilir. Örneğin:

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

Son olarak, bir bileşen veriyle doldurma gerektirdiğini belirtiyorsa, çalıştırma zamanında bileşenin render.js dosyası yüklenir ve hydrate() fonksiyonu çağrılarak derlenmiş işaretlemeyi içeren <div> kapsayıcısı iletilir.

Örneğin, render.js - bkz. hydrate() fonksiyonu:

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);
        }
    }