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/を参照)。ただし、上記の解決策はすべてのスライダーを消去するだけです。カスタム バインディング ハンドラーを使用してバリエーションを試してみましたが、うまくいきませんでした。これがひどい場合はご容赦ください。
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 でこれを実現する方法がわかりません。
あなたが提供できる助けを前もって感謝します!