使用 knockout js 和 jquery ui 滑块

我试图弄清楚knockout js是否可以很好地解决以下问题：

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

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

更改滑块值或文本框时，需要调用一个函数，该函数使用所有文本框的输入来计算结果。

我有我的快速但肮脏的 jQuery 解决方案here http://jsfiddle.net/9cA4Q/4/.

使用knockout js以更优雅的方式轻松实现相同的结果吗？

我想我需要创建一个自定义绑定处理程序，就像它在KnockoutJS 未捕获 jQuery UI 日期选择器更改事件 https://stackoverflow.com/questions/6612705/knockout-with-jquery-ui-datepicker

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

我使用自定义绑定来集成 jquery-ui 滑块，并使用 Knockout 捕获输入并计算净额。

--

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());