Knockout模型+ jQuery UI范围滑块

我正在使用Knockout模型，我希望使用jQuery UI范围滑块更新此模型中的值。 请考虑以下示例：

模型：

var ViewModel = function () { var self = this; self.MinTerm = ko.observable(); self.MaxTerm = ko.observable(); } ko.applyBindings(new ViewModel()); 

现在，jQuery UI范围滑块应更新这两个值。 这个（非常难看）的解决方案接近了，我的ViewModel中的值正在更新，但不知何故，这不会反映在绑定到这些值的控件中，例如：

HTML

脚本：

  $("#sliderTerms").slider({ range: true, min: 6, max: 120, values: [6, 120], step: 1, slide: function (event, ui) { ViewModel.MinTerm = ui.values[0]; ViewModel.MaxTerm = ui.values[1]; } }); 

现在，如果我可以绑定到像这样的自定义bindingHandler，那将非常好用，它非常适合将滑块绑定到我的KO模型中的奇异值：

 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) { var value = ko.utils.unwrapObservable(valueAccessor()); if (isNaN(value)) value = 0; $(element).slider("value", value); } }; 

这是我被卡住的地方。 例如，是否可以分配valueAccessors数组，因此我可以执行以下操作：

谢谢！

Answer 1

我根据你自己写了我自己的，它是一个快速的模拟，所以它可以有bug

http://jsfiddle.net/N9uwx/

 ko.bindingHandlers.slider = { init: function (element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().sliderOptions || {}; var observable = valueAccessor(); if(observable().splice) { options.range = true; } options.slide = function(e, ui) { observable(ui.values ? ui.values : ui.value); }; ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).slider("destroy"); }); $(element).slider(options); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).slider(value.slice ? "values" : "value", value); } }; 

Answer 2

谢谢！ 你的代码启发我写这个bindingHandler：

 ko.bindingHandlers.rangeSlider = { init: function (element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().sliderOptions || {}; var observable = valueAccessor(); ko.utils.registerEventHandler(element, "slidechange", function (event, ui) { observable[0](ui.values[0]); observable[1](ui.values[1]); }); ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).slider("destroy"); }); ko.utils.registerEventHandler(element, "slide", function (event, ui) { observable[0](ui.values[0]); observable[1](ui.values[1]); }); $(element).slider(options); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); if(value instanceof Array) { var value1= ko.utils.unwrapObservable(value[0]); var value2= ko.utils.unwrapObservable(value[1]); if(value1) { value = [value1, value2]; } else value = 0; } else if (isNaN(value)) value = 0; $(element).slider(value.slice ? "values" : "value", value); } }; 

现在我可以将rangeSlider绑定到我的Knockout模型，如下所示：

它有点臭，因为我认为值[i]应该绑定到valueAccessor [i]，但这对我来说已经足够了。

Answer 3

对于@Nico Beemster在他自己的代码中发现的错误，我们需要“更新”更新：部分如下：

  update: function (element, valueAccessor, allBindingsAccessor) { console.log("update fired"); var value = ko.utils.unwrapObservable(valueAccessor()); if(value instanceof Array) { var value1= ko.utils.unwrapObservable(value[0]); var value2= ko.utils.unwrapObservable(value[1]); if(value1) { value = [value1, value2]; } else value = 0; } else if (isNaN(value)) value = 0; $(element).slider(value.slice ? "values" : "value", value); $(element).slider("option", allBindingsAccessor().sliderOptions); } 

这是更新的小提琴。 如果你想更新max和min范围元素，如果它们是可观察元素，那就是这样。