我一直在寻找一种干净的方法来动态调整 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/
我很高兴,但我一直在使用允许动态添加多个滑块的 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 + '%');
});
});
}
}
}
我想我需要遍历动态创建的滑块数组并将调整大小功能应用于每个滑块,但我不确定如何使用 Knockout 完成此操作。
提前感谢您提供的任何帮助!