Knockout.js，jQuery移动滑块 [英] Knockoutjs, jquery mobile slider

问题描述

我想知道是否有人有一个带有敲除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移动滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！