How to correctly bind and initialize a jQuery Mobile range slider with knockout.js?

Question

I have some trouble to get a JQM range slider to work well with knockout. This is a very basic html code for a JQM slider:

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

I have created as a sample this knockout binding, applied on document ready:

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

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

I read over the internet some posts from other people that also found some problems related to the JQM initialization of the range slider (for example here: http://css.dzone.com/articles/knockoutjs-binding-helper and here: http://www.programico.com/1/post/2012/12/knockoutjs-jquerymobile-slider.html) and provide a working solution, each with his own custom binding implementation.

One of them, is as follows (by http://www.hughanderson.com/):

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

So far, so good. After that, i run into this problem:

if the JQM slider is on the first page, it works. When the JQM slider is on a second page, is not working anymore.

I think it is an issue related to this particulary JQM widget and his DOM manipulation, as i can understand. To better explain this, i have made two jsFiddle, where i just only swap the order of two JQM pages:

not working: http://jsfiddle.net/5q38Q/ slider on the second JQM page
working: http://jsfiddle.net/5q38Q/1/ slider on the first JQM page

Can someone explain please, which is the right way to initialize the knockout binding for a JQM slider? Maybe there is another way to write a custom binding for the JQM slider, or the knockout binding shall be put in the pagebeforeshow event?

UPDATE: With following change, the slider displays the correct value, and is synchronized also with the text-input part:

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

but im wonder if there is no better solution.

At least, together with Varun's custom binding, it works now for me very well!

score 2 · Answer 1 · answered May 12 '13 at 00:27

2

I ran into the same issue. This is how I solved it. Although this solution does not update the observable when you edit the value directly using the text input. (I don't display the input text box, so this solution is sufficient for me)

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

answered May 12 '13 at 00:27

darkphantum

521
5
13

Hi Varun, thank You very much for to share your experience and your work. But when I try your sample, I see always the same issue, when I go to the second page the slider is not initialized with the value of 4. So the question is why this happens? – user2308978 May 13 '13 at 09:08
i read your other post about this issue here: http://stackoverflow.com/a/16493161/2308978 Also for me, the only working custom binding is yours! – user2308978 May 14 '13 at 06:29
Hi Varun I changed the code using directly the ui-slider selector, without the c-slider wrapper, and it also worked well. Could you please update your answer and maybe explain why you need the "ko if: is"? It worked for me also without it. It would be great, if you could explain better your experience with this controversial issue. – user2308978 May 14 '13 at 06:41
The If condition is to simulate the control being added later. In your case since you are navigating pages the control is added dynamically by jqm. I wanted to do the same without having multiple pages :) – darkphantum May 15 '13 at 04:08

score 1 · Accepted Answer · answered May 17 '13 at 13:25

after some hours spent to test all variations found on the web about this issue, i ended up with following solution, maybe this helps some other people to spare time:

Final working fiddle: http://jsfiddle.net/CT7fy/

The question was about how to integrate knockout.js and the JQuery Mobile slider with multipage navigation, which, i think, will be one of the most common situation.

So i'm sorry that i cannot consider Varun's answer as complete and satisfiyng, but i must say, without Varun's custom bindinghandler i would have never found a working solution.

Here is the custom binding handler, slighlty modified:

/* 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");
    }
 };

...and here is the page initialization:

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

The text-part of the slider is also synchronized, after you pres enter or tab, as this is the standard slider behavior.

score 0 · Answer 3 · answered May 21 '14 at 10:34

In the custom handler, it's more reliable to bind to the "change" event than to bind to mouseup touchend and keypress. Also the pagebeforeshow event is not necessary. You can just set the value attribute during init in the handler:

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

See example: http://jsfiddle.net/ZbrB7/2483/

How to correctly bind and initialize a jQuery Mobile range slider with knockout.js?

3 Answers3