Question

我想使用jquery ui slider和knockout observable。

我发现的所有例子都使用淘汰2x并且当我尝试使用淘汰赛时失败了

有没有人有我可以使用的例子？

以下是我为knockout 2.x

找到的代码

<div data-bind="foreach: display_timers_for_this_queue().timers">
  Timer: <input data-bind="value: timer, valueUpdate: 'afterkeydown'" />
  <div style="margin: 2px; height: 30px;" data-bind="slider: timer, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>
</div>

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().sliderOptions || {};
        $(element).slider(options);
        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);
    }
};

使用的版本 jQuery的UI-1.12.0 敲除3.4.0

Answer 1

这是使用淘汰赛3.3.0

<div data-bind="slider: MyObservable, 
                    sliderOptions: {min: 0, max: 100, range: 'min', step: 1, 
                                    start: function(){//custom logic},
                                    stop: function(event, ui){//custom logic}}"></div>


ko.bindingHandlers.slider = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                var options = allBindingsAccessor().sliderOptions || {};
                $(element).slider(options);
                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;
                //custom logic
                $(element).slider("value", value);
            }
        };

knockout 3.4 jquery-ui slider

1 个答案: