Knockoutjs, jquery 移动滑块 [英] Knockoutjs, jquery mobile slider

问题描述

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

1) 将值绑定到可观察对象 - 我可以最初绑定它，即设置滑块的值"，但这不会在拖动时更新底层可观察对象 - 我认为这与 JQM 放置元素有关表示它的输入?

2) 更改 min、max、value 属性时刷新样式.

这是我所拥有的一个子集，currentItems 根据选择而变化:

workloadViewModel.filterValues = ko.dependentObservable(function () {变量 tmp = {};var itms = this.currentItems();if (itms.length == 0) 返回；tmp.max = itms[0].val;tmp.min = itms[itms.length - 1].val;tmp.minRange = this.minRange();返回 tmp;}，工作负载视图模型)；ko.bindingHandlers.jqmRefreshSlider = {更新:函数(元素，valueAccessor){ko.utils.unwrapObservable(valueAccessor());//只是为了创建一个依赖尝试 {$("输入[类型=范围]").slider("刷新");} 捕捉(错误){trace("错误刷新滑块");}}};<div id="filters" data-bind="template: {name: 'filterTemplate', data: filterValues}, jqmRefreshSlider: filterValues"></div><script id='filterTemplate' type='text/html'><p>分钟:${minRange}</p><p>分钟:${分钟}</p><p>最大:${max}</p>

非常感谢您能给我的任何帮助.

J

解决方案

这是对 silder 的有效绑定:

ko.bindingHandlers.slider = {初始化:函数(元素，valueAccessor){var val = valueAccessor()();$(元素).slider({值:值，步骤:3，幻灯片:功能(事件，用户界面){valueAccessor()(ui.value);}});},更新:函数(元素，valueAccessor){$(element).slider("option", "value", valueAccessor()());}};

I was wondering if someone had a working example of JQM slider with knockoutjs. I have 2 issues:

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) refreshing the style when changing the min, max, value properties.

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

解决方案

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()());
    }
};

这篇关于Knockoutjs, jquery 移动滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！