淘汰自定義綁定光滑js無法正常工作

Question

我沒有敲除綁定的工作代碼是：

<div class="slick_demo_1">

                    <div>
                        <div class="ibox-content">
                            <h2>Slide 1</h2>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 2</h2>
                        </div>
                    </div>
                    <div>
                        <div class="ibox-content">
                            <h2>Slide 3</h2>
                        </div>
                    </div>
                </div>

並初始化光滑我的js代碼是：

$('.slick_demo_1').slick({
                dots: true
            });

上面的代碼工作正常。 現在敲除綁定的代碼是：

<div class="slick_demo_1" data-bind="foreach:showSlider">

                    <div>
                        <div class="ibox-content">
                            <h2 data-bind="slider"></h2>
                        </div>
                    </div>
                </div>

並使用DOM綁定光滑我的代碼是：

ko.bindingHandlers.slick = { 
            init: function (element, valueAccessor) {
                $(element).slick({
                    dots: true
                });
            }
        };

但是自定義綁定不起作用。 我做錯了什么？

Answer 1

您顯示的代碼幾乎不像自定義綁定器的正確實現。

幾個提示：

• 您應該在根元素中使用自定義綁定
• 自定義綁定應該負責構建，如果可能的話，從元素中刪除carousel API（使用unslick的destroy或unslick ）如果元素被ko處理掉
• 自定義綁定器應該能夠更新輪播內的元素
• 使用額外的slickOptions綁定將其他對象傳遞給光滑初始化會很有趣

這里解釋了自定義綁定的基本結構。 查看代碼模板：

ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
}

};

如上所述， init負責初始化caroulse，並且update負責在陣列改變時更新輪播的內容。 RP Niemeyer在這里深入解釋了自定義綁定： 另一個關於KnockoutJS的自定義綁定的看法 。

如果您正確實現它，您的HTML代碼應如下所示：

<div data-bind="slick: imagesArray, slickOptions: additionalOptions>
</div>

在init ，您的自定義綁定應該基於imagesArray創建元素，並使用additionalOptions如果存在）調用光滑初始化，並在元素被ko處理時注冊光滑破壞。 在更新中，您應該修改內部元素並可能重新應用光滑。 您還應該查看slick的API 。

這個小提琴顯示了部分實現，但更完整的是當前的floowing片段：

 var imageUrls = []; var i = 1; for (i=1;i<=10;i++) imageUrls.push('http://lorempixel.com/400/200/animals/'+i); ko.bindingHandlers.slick = { init: function(element, valueAccessor, allBindingsAccessor) { // Clears the div $(element).empty(); // Creates the inner divs with images var images = ko.unwrap(valueAccessor()); if (images) { images.forEach(function(imgUrl) { $div = $('<div>'); $image = $('<img>'); $image.attr('src',imgUrl); $div.append($image); $(element).append($div) }); } // try to recover slickOptions var options = allBindingsAccessor().slickOptions || {}; // Initialize slick on the div, with provided options $(element).slick(options); //handle disposal, if KO removes the element ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).slick('unslick'); }); }, //update the control when the view model changes update: function(element, valueAccessor) { var images = ko.unwrap(valueAccessor()); // Do something to update the content } }; var vm = { images: ko.observableArray(imageUrls), options: {} } ko.applyBindings(vm, gallery); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script> <link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css" rel="stylesheet"> <div id="gallery" style="width:400px" data-bind="slick: images, slickOptions: {dots:true, initialSlide:4}"> </div> 

如果imgUrls發生變化，實現中缺少的部分是更新庫。 但它顯示了提示中的主要技巧。