利用基因敲除JS与jQuery UI的滑块(Using knockout js with jquer

我试图找出如果淘汰赛JS会很好地工作下列问题：

我有我要链接到文本框多个滑块。

当文本框被改变，则相应滑块必须更新为新的值，反之亦然。

上改变所述滑块值或文本框的功能需要被调用使用从所有文本框的输入计算的结果。

我有我的快速和肮脏的jQuery的解决方案在这里。

难道是容易实现同样的结果，用淘汰赛JS更优雅的方式？

我想我需要创建一个像它在做一个自定义绑定处理程序的jQuery UI日期选择器更改事件不会被抓到KnockoutJS

Answer 1:

下面是一个例子： http://jsfiddle.net/jearles/Dt7Ka/

我使用自定义的结合，整合了jQuery UI的滑块和使用淘汰赛捕捉输入和计算净量。

<h2>Slider Demo</h2>

Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

Net: <span data-bind="text: net"></span>

视图模型

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    $(element).slider({
        "slide": function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        },
        "change": function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        }
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
  },
  update: function (element, valueAccessor) {
    var value = ko.unwrap(valueAccessor());
    if (isNaN(value)) {
        value = 0;
    }
    $(element).slider("value", value);
  }
};

var ViewModel = function() {
    var self = this;

    self.savings = ko.observable(10);
    self.spent = ko.observable(5);
    self.net = ko.computed(function() {
        return self.savings() - self.spent();
    });
}

ko.applyBindings(new ViewModel());

Answer 2:

我知道这是前几天，但我做出约翰Earles代码进行一些调整：

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, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value)) value = 0;
    $(element).slider("option", allBindingsAccessor().sliderOptions);
    $(element).slider("value", value);
}
};

这样做的原因是，如果你使用会改变（FX另一个观察到的）的选项，那么它不会影响滑块，即使你希望它这样做。

Answer 3:

@约翰Earles和@迈克尔基雷汉森：感谢您的精彩解决方案！

我用了从迈克尔·基雷汉森先进的编码。我绑“最大”滑块到ko.observable的选择，事实证明，滑不正确更新在这种情况下的价值。例如：让我们说滑块在你改变了最大值100最大25 UND的值25，滑块保持在最合适的位置，这表明它是在最大值（但价值仍然25，而不是100）。只要你滑动一个指向左边，你会得到更新为99的值。

解决方法：在“更新”部分刚刚过去的两行切换到：

$(element).slider("option", allBindingsAccessor().sliderOptions);
$(element).slider("value", value);

这首先改变的选项，则该值，它就像一个魅力。

Answer 4:

非常感谢您的帮助，我需要在我的情况下使用一系列滑块所以这里是一个扩展@约翰Earles和@迈克尔基雷汉森

ko.bindingHandlers.sliderRange = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
        var observable = valueAccessor();
        observable.Min(ui.values[0]);
        observable.Max(ui.values[1]);
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
    ko.utils.registerEventHandler(element, "slide", function (event, ui) {
        var observable = valueAccessor();
        observable.Min(ui.values[0]);
        observable.Max(ui.values[1]);
    });
},
update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value.Min())) value.Min(0);
    if (isNaN(value.Max())) value.Max(0);

    $(element).slider("option", allBindingsAccessor().sliderOptions);
    $(element).slider("values", 0, value.Min());
    $(element).slider("values", 1, value.Max());
}
};

然后将HTML陪它

<div id="slider-range" 
             data-bind="sliderRange: { Min: 0, Max: 100 }, 
                                sliderOptions: { 
                                    range: true,
                                    min: 0,
                                    max: 100,
                                    step: 10,
                                    values: [0, 100]
                                }"></div>

文章来源: Using knockout js with jquery ui sliders