我试图弄清楚淘汰赛 js 是否可以很好地解决以下问题:
我有多个要链接到文本框的滑块。
当文本框更改时,相应的滑块必须更新为新值,反之亦然。
在更改滑块值或文本框时,需要调用一个函数,该函数使用来自所有文本框的输入来计算结果。
我在这里有我快速而肮脏的 jQuery 解决方案。
使用淘汰赛js以更优雅的方式实现相同的结果是否容易?
我想我需要创建一个自定义绑定处理程序,就像它在jQuery UI 日期选择器更改事件中完成的那样,没有被 KnockoutJS 捕获
我试图弄清楚淘汰赛 js 是否可以很好地解决以下问题:
我有多个要链接到文本框的滑块。
当文本框更改时,相应的滑块必须更新为新值,反之亦然。
在更改滑块值或文本框时,需要调用一个函数,该函数使用来自所有文本框的输入来计算结果。
我在这里有我快速而肮脏的 jQuery 解决方案。
使用淘汰赛js以更优雅的方式实现相同的结果是否容易?
我想我需要创建一个自定义绑定处理程序,就像它在jQuery UI 日期选择器更改事件中完成的那样,没有被 KnockoutJS 捕获
这是一个例子:http: //jsfiddle.net/jearles/Dt7Ka/
我使用自定义绑定来集成 jquery-ui 滑块并使用 Knockout 来捕获输入并计算净额。
--
用户界面
<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());
我知道那是几天前的事了,但我对 John 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 另一个 observable),那么即使您希望它这样做,它也不会影响滑块。
@John Earles 和 @Michael Kire Hansen:感谢您的精彩解决方案!
我使用了 Michael Kire Hansen 的高级代码。我将滑块的“max:”选项绑定到 ko.observable,结果发现在这种情况下滑块没有正确更新值。示例:假设滑块位于最大值 25 的值 25 并且您将最大值更改为 100,滑块停留在最右边的位置,表示它处于最大值(但值仍然是 25,而不是 100)。只要向左滑动一点,值就会更新为 99。
解决方案:在“更新:”部分只需将最后两行切换为:
$(element).slider("option", allBindingsAccessor().sliderOptions);
$(element).slider("value", value);
这首先改变了选项,然后改变了价值,它就像一个魅力。
非常感谢您的帮助,我需要在我的场景中使用范围滑块,所以这里是 @John Earles 和 @Michael Kire Hansen 的扩展
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>