Knockoutjs，jquery移动滑块

我想知道是否有人有一个带有knockoutjs的JQM滑块的工作示例。 我有两个问题：

1）将值绑定到observable – 我可以最初绑定它，即设置滑块的“值”，但这不会在拖动时更新底层的observable – 我认为这与JQM将元素放在输入上代表它？

2）更改min，max，value属性时刷新样式。

以下是我所拥有的子集，currentItems根据选择进行更改：

workloadViewModel.filterValues = ko.dependentObservable(function () { var tmp = {}; var itms = this.currentItems(); if (itms.length == 0) return; tmp.max = itms[0].val; tmp.min = itms[itms.length - 1].val; tmp.minRange = this.minRange(); return tmp; }, workloadViewModel); ko.bindingHandlers.jqmRefreshSlider = { update: function (element, valueAccessor) { ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency try { $("input[type=range]").slider("refresh"); } catch (error) { trace("error refreshing slider"); } } }; 
  
min: ${minRange}
 
min: ${min}
 
max: ${max}
 
  
  

非常感谢你给我的任何帮助。

Ĵ

Answer 1

这是有效的绑定到silder：

 ko.bindingHandlers.slider = { init: function (element, valueAccessor) { var val = valueAccessor()(); $(element).slider( { value: val, step: 3, slide: function (event, ui) { valueAccessor()(ui.value); } }); }, update: function (element, valueAccessor) { $(element).slider("option", "value", valueAccessor()()); } }; 

Answer 2

以上都没有为我工作，因为我的滑块是动态添加的

Answer 3

我用JQM滑块咬了几天牙齿。 最后，我能够获得真实的双向绑定到滑块值的observable，并让它更新拇指滑块和数值范围输入。 这是我想出的：

 ko.bindingHandlers.slider = { init: function (element, valueAccessor) { // use setTimeout with 0 to run this after Knockout is done setTimeout(function () { // $(element) doesn't work as that has been removed from the DOM var curSlider = $('#' + element.id); // helper function that updates the slider and refreshes the thumb location function setSliderValue(newValue) { curSlider.val(newValue).slider('refresh'); } // subscribe to the bound observable and update the slider when it changes valueAccessor().subscribe(setSliderValue); // set up the initial value, which of course is NOT stored in curSlider, but the original element :\ setSliderValue($(element).val()); // subscribe to the slider's change event and update the bound observable curSlider.bind('change', function () { valueAccessor()(curSlider.val()); }); }, 0); } }; 

以下是它在HTML中的使用方式：

我也用这些信息更新了我的博客。 有关集成Knockout和JQuery Mobile的更多信息可以在那里找到。 http://www.programico.com/1/post/2012/12/knockoutjs-jquerymobile-slider.html

Answer 4

以下对我有用。 它还处理动态创建的元素。 虽然有点hacky。 我重用了Knockoutjs（版本2.1.0）中的一些代码：bind boolean value to select box for autotically handle parsing strings to bools，反之亦然：

 ko.bindingHandlers.jqmFlip = { init: function(element, valueAccessor, allBindingsAccessor) { var observable = valueAccessor(), interceptor = ko.computed({ read: function() { return observable().toString(); }, write: function(newValue) { observable(newValue === "true"); } }); var result = ko.applyBindingsToNode(element, { value: interceptor }); try { $(element).slider("refresh"); } catch(x) { $(element).next('.ui-slider').remove(); $(element).slider(); /*console.log('jqmFlip init error ' + x);*/ } return result; }, update: function (element, valueAccessor) { ko.bindingHandlers.value.update.apply(this, arguments); var value = valueAccessor(); var valueUnwrapped = ko.utils.unwrapObservable(value); try { $(element).slider("refresh"); } catch(x) { debugger; console.log('jqmFlip update error ' + x); } } };