jquery-ui – 使用jquery ui滑块使用knockout js

我使用自定义绑定来集成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,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);
    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",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);
  }
};

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