Geek Answers Handbook

JQuery integration for mobile devices and knockouts - a slider was created, but it does not work

The main problem is that the slider created from JQuery Mobile inside the Knockout template does not work. The slider does not slip.

I created the following jsFiddle examples to illustrate my problem:

http://jsfiddle.net/fdoub/YEUgw/ - color sliders do not work http://jsfiddle.net/fdoub/YEUgw/1/ - the workaround I came up with

I checked other stackoverflow entries and did not find any solution. I tried to knock out bindHandlers and jQuery mobile.refresh without success.

This is my first stackoverflow post, so be careful if I haven't done it perfectly.

Thank you for all your invaluable advice.

Inoperative example:

<!DOCTYPE html> <html> <head> <title>Slider Problem</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h4>Slider Sample</h4> </div> <div data-role="content"> <p>Working Slider</p> <select name="slider" class="flip-a" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <span>Label Value</span> <br /> <br /> <span>Non-Working Sliders</span> <div data-bind="foreach:colors" style="visibility: visible;"> <select name="slider" class="flip-a" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <span data-bind="text:$data"></span> <br /> </div> <script type="text/javascript"> $('#page1').on('pageinit', function () { var viewModel = { colors: ko.observableArray(["Green", "Blue", "Red"]), }; ko.applyBindings(viewModel); }); </script> </div> </div> </body> </html>

Did the job by changing javascript to

 <script type="text/javascript"> //turn off slider creation $.mobile.slider.prototype.options.initSelector = ".nosliders"; $('#page1').on('pageinit', function () { var viewModel = { colors: ko.observableArray(["Green", "Blue", "Red"]), }; ko.applyBindings(viewModel); //manually create sliders $(".flip-a").slider({ create: function(event, ui) { } }); }); </script>
+4
source share
1 answer

I am not familiar with Knockout, but you can create a binding handler like this:

  ko.bindingHandlers.jSlider = { init: function(element) { $(element).slider({ create: function(event, ui) { }}); } };

Then each element with data-bind = "{jSlider: true}" is called by the init method and creates your slider.

Browse this one for more info.

+1
source

More articles:


All Articles