使用Knockout动态调整多个Kendo滑块的大小

Question

我一直在寻找一种干净的方式来动态调整Kendo UI Sliders的大小；Knockout-Kendo和Paul爱尔兰的智能调整大小插件使我能够为个人滑块找到一个合理可行的解决方案：

<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/)。不过，上面的解决方案只是简单地清除了所有的滑块。我尝试了一个不起作用的自定义绑定处理程序的变体--请原谅，这太可怕了，但我对Knockout还很陌生，而且还在不断提高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 + '%');
                });
            });
        }
    }
} 

我认为我需要遍历动态创建的滑块数组，并对每个滑块应用resize函数，但我不确定如何使用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/