Question

我一直在寻找一种动态调整Kendo UI Sliders的简洁方法; 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 + '%');
    });
});

您可以通过在此小提琴中拖动“结果”窗格的边框来查看结果：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/

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

1 个答案: