2

我很难让 JQM 范围滑块在淘汰赛中很好地工作。这是 JQM 滑块的一个非常基本的 html 代码：

<input type="range" name="quantity-slider" id="quantity-slider" min="0" max="10">

我已经创建了这个敲除绑定作为示例，应用于准备好的文档：

var ViewModel = function() {
    this.quantity = ko.observable(4);
}

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

我在互联网上阅读了其他人的一些帖子，这些帖子也发现了与范围滑块的 JQM 初始化相关的一些问题（例如这里：http ://css.dzone.com/articles/knockoutjs-binding-helper和这里：http ://www.programico.com/1/post/2012/12/knockoutjs-jquerymobile-slider.html）并提供一个可行的解决方案，每个解决方案都有自己的自定义绑定实现。

其中之一如下（来自http://www.hughanderson.com/）：

data-bind="value: quantity, slider: quantity"

到目前为止，一切都很好。之后，我遇到了这个问题：

如果 JQM 滑块在第一页上，它可以工作。当 JQM 滑块位于第二页时，不再工作。

我认为这是与这个特殊的 JQM 小部件和他的 DOM 操作有关的问题，我可以理解。为了更好地解释这一点，我制作了两个 jsFiddle，我只是交换了两个 JQM 页面的顺序：

  1. 不起作用：第二个 JQM 页面上的http://jsfiddle.net/5q38Q/滑块
  2. 工作： http: //jsfiddle.net/5q38Q/1/第一个 JQM 页面上的滑块

有人可以解释一下，这是为 JQM 滑块初始化敲除绑定的正确方法吗？也许还有另一种方法可以为 JQM 滑块编写自定义绑定，或者将敲除绑定放在 pagebeforeshow 事件中？

更新： 通过以下更改，滑块显示正确的值，并且还与文本输入部分同步：

$(document).on('pagebeforeshow', '#slider-page', function(){       
    $('#quantity-slider').val(viewModel.quantity());
    $('#quantity-slider').slider('refresh');
});

但我想知道是否没有更好的解决方案。

至少，连同 Varun 的自定义绑定，它现在非常适合我！

4

3 回答 3

2

我遇到了同样的问题。这就是我解决它的方法。尽管当您直接使用文本输入编辑值时，此解决方案不会更新可观察值。（我不显示输入文本框，所以这个解决方案对我来说已经足够了）

http://jsfiddle.net/WMr8D/9/

$(document).ready(function () {
var ViewModel = function () {
    var self = this;
    self.quantity = ko.observable(4);
};    

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(document).on({
            "mouseup touchend keypress": function (elem) {
                value($('#' + element.id).val());
            }
        }, ".c-slider");
    }
};    

ko.applyBindings(new ViewModel());
});
于 2013-05-12T00:27:09.633 回答
1

在花了几个小时测试网上找到的关于这个问题的所有变体之后，我最终得到了以下解决方案，也许这有助于其他人腾出时间：

最后的工作小提琴：http: //jsfiddle.net/CT7fy/

问题是关于如何将 knockout.js 和 JQuery Mobile 滑块与多页导航集成，我认为这将是最常见的情况之一。

所以很抱歉，我不能认为 Varun 的回答是完整且令人满意的，但我必须说，如果没有Varun 的自定义绑定处理程序，我将永远找不到可行的解决方案。

这是自定义绑定处理程序，稍作修改：

/* custom binding handler thanks to Varun http://stackoverflow.com/a/16493161/2308978 */
ko.bindingHandlers.slider = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
            $(document).on({
                "mouseup touchend keypress": function (elem) {
                var sliderVal = $('#' + element.id).val();
                value(sliderVal);
            }
        }, ".ui-slider");
    }
 };

...这是页面初始化：

$(document).on('pagebeforeshow', '#slider-page', function(){
    $('#quantity-slider').val(viewModel.quantity());
    $('#quantity-slider').slider('refresh');
});

在您按下 Enter 或 Tab 后，滑块的文本部分也会同步，因为这是标准滑块行为。

于 2013-05-17T13:25:45.490 回答
0

在自定义处理程序中，绑定到“更改”事件比绑定到 mouseup touchend 和 keypress 更可靠。也不需要 pagebeforeshow 事件。您可以在处理程序的 init 期间设置 value 属性：

ko.bindingHandlers.slider = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        $(element).attr("value", value());
            $(document).on({
                "change": function (elem) {
                var sliderVal = $('#' + element.id).val();
                value(sliderVal);
            }
        }, ".ui-slider");
    }
 };

见例子：http: //jsfiddle.net/ZbrB7/2483/

于 2014-05-21T10:34:07.927 回答