问题描述
我想知道是否有人有一个带有敲除js的JQM滑块的有效示例.我有2个问题:
I was wondering if someone had a working example of JQM slider with knockoutjs. I have 2 issues:
1)将值绑定到可观察对象-我可以将其初始绑定,即设置滑块的值",但是在拖动时这不会更新基础可观察对象-我认为这与JQM有关,将元素放在输入代表它?
1) binding the value to an observable - I can bind it initially i.e. set the "value" of the slider, but this does not update the underlying observable when dragged - I think that this is to do with JQM putting elements over the input to represent it?
2)更改最小值,最大值,值属性时刷新样式.
2) refreshing the style when changing the min, max, value properties.
这是我所拥有的子集,currentItems根据选择而改变:
Here is a subset of what I have, currentItems changes based on a selection:
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");
}
}
};
<div id="filters" data-bind="template: {name: 'filterTemplate', data: filterValues}, jqmRefreshSlider: filterValues"></div>
<script id='filterTemplate' type='text/html'>
<p>min: ${minRange}</p>
<p>min: ${min}</p>
<p>max: ${max}</p>
<div>
<input type="range" name="slider_min" id="slider_min" value="${minRange}" min="${min}" max="${max}" />
</div>
</script>
非常感谢您能为我提供的任何帮助.
Thanks you very much for any help you can give me.
J
推荐答案
这正在绑定到silder:
This is working binding to 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()());
}
};
这篇关于Knockout.js,jQuery移动滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!