jQuery Mobile and KO.js
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<p>
<select data-bind="options: ['Yes','No'], value: Partecipating, jqSlider: true" ></select>
</p>
<p>
<select data-bind="value: Partecipating, jqSlider: true" >
<option value="Yes">Yes</option>
<option>No</option>
</select>
</p>
<p>
<select data-bind="options: ['Yes','No'], value: Partecipating" data-role="slider"></select>
</p>
JavaScript
ko.bindingHandlers.jqSlider = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).slider({ mini: true });
$( element ).slider( "refresh" );
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
$( element ).slider( "refresh" );
}
};
viewModel = {
Partecipating: ko.observable('Yes')
};
ko.applyBindings(viewModel);