淘汰赛 3.4 jquery-ui 滑块答案

【问题标题】：knockout 3.4 jquery-ui slider淘汰赛 3.4 jquery-ui 滑块
【发布时间】：2016-08-12 22:31:30
【问题描述】：

我想使用 jquery ui 滑块和可观察到的淘汰赛。

我发现的所有示例都使用了 knockout 2x，但在我尝试使用 knockout 3.4 时都失败了

谁有我可以使用的例子？

这是我为淘汰赛 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

【问题讨论】：

使用 jquery-ui-1.12.0
不要滚动你自己的绑定。使用现有的。 gvas.github.io/knockout-jqueryui

标签： jquery-ui-slider knockout-3.0

【解决方案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);
            }
        };

【讨论】：