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

Question

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

<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 + '%');
    });
});

您可以通过在此 Fiddle 上拖动“结果”窗格的边框来查看结果：http://jsfiddle.net/MontiDesign/DuZK3/24/

我很高兴，但我一直在处理允许动态添加多个滑块的淘汰赛方案（请参阅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 + '%');
                });
            });
        }
    }
} 

我认为我需要遍历动态创建的滑块数组并将调整大小功能应用于每个滑块，但我不确定如何使用 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/获取