jquery - Knockoutjs，jquery 移动 slider

Question

我想知道是否有人有一个 JQM slider 和 knockoutjs 的工作示例。我有两个问题:

1)将值绑定(bind)到可观察量 - 我可以最初绑定(bind)它，即设置 slider 的“值”，但这在拖动时不会更新底层可观察量 - 我认为这与 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");
    }
}
};

<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>

非常感谢您为我提供的任何帮助。

J

Answer 1

这正在绑定(bind)到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()());
    }
};