通過Knockout動態調整多個Kendo滑塊的大小

Question

我一直在尋找一種乾淨的方式來動態調整Kendo UI滑塊的大小;淘汰賽劍道和保羅愛爾蘭的智能調整大小的插件，使我在一個合理可行的解決方案爲個人滑塊到達：

<div class="sliderWrapper"> 
    <input class="slider col" data-bind="kendoSlider: { value: currValue, enabled: enabled, min: 0, max: 100, slide: sliderOnSlide, tickPlacement: 'none', smallStep: 1, showButtons: false, tooltip: { 'enabled': false } }, sliderTip: {}" /> 
</div> 

var ViewModel = function (initValue) { 
    this.currValue = ko.observable(initValue); 
    this.enabled = ko.observable(true); 
}; 

ko.bindingHandlers.sliderTip = { 
    init: function(element, valueAccessor) { 
     var dragger = $(element).closest('.k-slider').find('.k-draghandle'); 
     dragger.empty().html('<span class="sliderTip">0%</span>'); 
    } 
}; 

ko.applyBindings(new ViewModel(0)); 

$(window).smartresize(function() { 
    $('.sliderBox').each(function() { 
     var value = $(this).val(); 
     $(this).prev().empty().append('<input class="slider col" data-bind="kendoSlider: { value: currValue, enabled: enabled, min: 0, max: 100, slide: sliderOnSlide, tickPlacement: \'none\', smallStep: 1, showButtons: false, tooltip: { \'enabled\': false } }, sliderTip: {}" />'); 
     ko.applyBindings(new ViewModel(value)); 
      $(this).prev().find('.sliderTip').text(value + '%'); 
    }); 
}); 

您可以通過這個小提琴拖動結果窗格中的邊界看到的結果是：http://jsfiddle.net/MontiDesign/DuZK3/24/

我很高興，但我一直在與Knockout場景合作，允許動態添加多個滑塊（請參閱http://jsfiddle.net/MontiDesign/DuZK3/37/）。上面的解決方案簡單地刪除了所有的滑塊。我嘗試了變化使用不工作的自定義綁定處理程序 - 和原諒我，如果這僅僅是可怕的，但我是新來的淘汰賽和JS/jQuery的技能還在不斷增加：

ko.bindingHandlers.resizeSlider = { 
    init: function(element, valueAccessor, allBindings) { 
     var slider = $(element).data('kendoSlider'); 
     if (slider) { 
      $(window).smartresize(function() { 
       $(slider).closest('.sliderWrapper').next().each(function() { 
        var value = $(this).val(); 
        $(this).prev().empty().append('<input class="slider col" data-bind="kendoSlider: { value: currValue, enabled: enabled, min: 0, max: 100, slide: sliderOnSlide, tickPlacement: \'none\', smallStep: 1, showButtons: false, tooltip: { \'enabled\': false } }, sliderTip: {}" />'); 
        ko.applyBindings(new CreateSlider(value)); 
        $(this).prev().find('.sliderTip').text(value + '%'); 
       }); 
      }); 
     } 
    } 
} 

我想我需要遍歷動態創建的滑塊數組並對每個應用調整大小函數，但我不確定如何使用Knockout完成此操作。

在此先感謝您提供的任何幫助！

Answer 1

那麼，我找不到一種方法來做到這一點，而不使用Knockout.js的多個綁定，我知道這是一個非常糟糕的主意。

所以，我放棄了劍道滑塊。 jQuery UI的範圍滑塊基於百分比而不是硬像素的拖動手柄的位置，因此它們流暢開箱即用，並且沒有障礙地調整大小。他們與Knockout一起工作良好。

我發現this fiddle，並適應自己的需要：

<button data-bind="click: $root.addThis">Add a Slider</button> 

<div id="wrapper" data-bind="foreach: sliders"> 
    <div class="sliderContainer"> 
     <div class="checkbox"> 
      <input type="checkbox" class="checkbox" data-bind="checked: enabled" /> <span class="sansSerif">Charity Name</span> 
     </div> 
     <div class="slider col" data-bind="slider: currValue, sliderOptions: { min: 0, max: 100, range: 'min', value: 0 }"></div> 
     <input class="sliderBox col sansSerif" type="text" data-bind="value: currValue, enabled: enabled, valueUpdate: 'afterkeydown'" /> 
    </div> 
</div> 

$(function() { 

    function SliderViewModel() { 
     var self = this; 

     self.sliders = ko.observableArray(); 
     self.addThis = function() { 
      var s = self.sliders; 
      s.push(new CreateSlider()); 
     } 
    }; 

    ko.bindingHandlers.slider = { 
     init: function(element, valueAccessor, allBindingsAccessor) { 
      var options = allBindingsAccessor().sliderOptions || {}; 
      $(element).slider(options); 
      $('.ui-slider-handle', element).append('<span data-bind="text: currValue">0</span>%'); 
      ko.utils.registerEventHandler(element, 'slidechange', function(event, ui) { 
       var observable = valueAccessor(); 
       observable(ui.value); 
      }); 
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
       $(element).slider("destroy"); 
      }); 
      ko.utils.registerEventHandler(element, 'slide', function (event, ui) { 
       var observable = valueAccessor(); 
       observable(ui.value); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      if (isNaN(value)) value = 0; 
      $(element).slider('value', value); 
     } 
    }; 

    ko.applyBindings(new SliderViewModel()); 

    $(document).on('mouseup touchend', function() { 
     if ($('.ui-slider-handle').hasClass('ui-state-focus')) { 
      $('.ui-slider-handle.ui-state-focus').removeClass('ui-state-focus'); 
     } 
    }); 

}); 

function CreateSlider() { 
    var self = this; 
    self.currValue = ko.observable(0); 
    self.enabled = ko.observable(true); 
} 

完整的示例，請http://jsfiddle.net/MontiDesign/Sb4qG/4/