将剔除JS与jQuery UI滑块一起使用 [英] Using knockout js with jquery ui sliders

问题描述

我正在尝试确定敲除js是否可以很好地解决以下问题:

I'm trying to figure out if knockout js would work nicely for the following problem:

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

I have multiple sliders that I want to link to textboxes.

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

When the textbox is changed the corresponding slider must update to the new value and vice versa.

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

On changing the slider value or textbox a function needs to be called that uses the input from all textboxes to calculate a result.

我有我的快速而肮脏的jQuery解决方案此处.

I have my quick and dirty jQuery solution here.

使用敲除js，以更优雅的方式实现相同的结果是否容易?

Would it be easy to achieve the same result in a more elegant way using knockout js?

我想我需要创建一个自定义绑定处理程序，就像在 jQuery UI datepicker更改中所做的那样KnockoutJS未捕获到事件

I guess I would need to create a custom binding handler like its done in jQuery UI datepicker change event not caught by KnockoutJS

推荐答案

这里是一个示例: http://jsfiddle.net/jearles/Dt7Ka/

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

I use a custom binding to integrate the jquery-ui slider and use Knockout to capture the inputs and calculate the net amount.

-

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

这篇关于将剔除JS与jQuery UI滑块一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！