Spinner with valueUpdate
How to make knockout-spinner update when spinner buttons are pressed
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<input id="infoX" data-bind="spinner: infoXpos, spinnerOptions: { min: -50, max: 50 }, valueUpdate: ['propertychange','input']" />
<br>
Xpos=<span data-bind="text: infoXpos"></span>
<hr/>
<input id="infoX" data-bind="spinner: infoXpos, spinnerOptions: { min: -50, max: 50 }, valueUpdate: 'keyUp'" />
<br>
Xpos=<span data-bind="text: infoXpos"></span>
<hr/>
JavaScript
ko.bindingHandlers.spinner = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().spinnerOptions || {};
//handle the field changing
ko.utils.registerEventHandler(element, "spinstop", function () {
var observable = valueAccessor();
observable($(element).spinner("value"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).spinner("destroy");
});
$(element).spinner(options);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).spinner("value");
if (value !== current) {
$(element).spinner("value", value);
}
}
};
viewModel = function(){
var self = this;
self.infoXpos = ko.observable(7);
};
ko.applyBindings( new viewModel() );