将淘汰赛 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.

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

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

我想我需要创建一个自定义绑定处理程序，就像它在 jQuery UI 日期选择器更改中所做的那样事件未被 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.

--

界面

<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屋！