jQueryUI Spinner widget with knockout

Question

How can I use a jQuery UI Spinner widget in Knockout bound input?

    <tbody data-bind="foreach: orders">
        <tr>
            <td data-bind="text: Name"></td>
            <td><input type="number" style="width: 100px;" data-bind="value: Price" /></td>
            <td><input type="number" style="width: 50px;" data-bind="value: VAT" /></td>
            <td><input type="number" style="width: 50px;" data-bind="value: Number" /></td>
            <td data-bind="text: Final()"></td>
            <td><a href="javascript:void(0);" data-bind="click: $root.removeOrder">Remove</a></td>
        </tr>    
    </tbody>

Answer 1

The best way is to create custom binding to bind spinner to the input:

ko.bindingHandlers.spinner = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize spinner with some optional options
        var options = allBindingsAccessor().spinnerOptions || {};
        $(element).spinner(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "spinchange", 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");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).spinner("value");

        if (value !== current) {
            $(element).spinner("value", value);
        }
    }
};

And then just use it instead of value binding:

<input
    type="number"
    style="width: 100px;"
    data-bind="spinner: Price, spinnerOptions: { min: 0 } " />

Here is working fiddle: http://jsfiddle.net/vyshniakov/SwKGb/

Answer 2

The answers on this page are correct and helpful. I found, however, that I was getting bad behaviour when someone was typing a value in the field. Each key press seems to fire a "spinstop" event too. Further, the keypresses were bypassing the field formatting and options.step. Fortunately we can examine the incoming event to see what's actually happening. There may be better ways but I thought I'd share anyway.

// Abstract to a function to allow for multiple binding types
function createSpinner(defaultOptions) {
    return {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = $.extend(true, {}, allBindingsAccessor().spinnerOptions, defaultOptions);
            var widget = $(element);
            var observable = valueAccessor();

            widget.spinner(options);

            // handle field changes onblur [copies field -> model]
            ko.utils.registerEventHandler(element, "blur", function (event) {
                var inputValue = Number(widget.spinner("value"));
                var modelValue = observable();
                if (inputValue !== modelValue) {
                    // Set the widget (this forces formatting and rounding) - does not fire events
                    widget.spinner("value", inputValue);
                    // Read the value back out (saves us rounding)
                    var numberValue = Number(widget.spinner("value"));
                    // Set the observable
                    observable(numberValue);
                }
            });

            // handle other field changes
            ko.utils.registerEventHandler(element, "spinstop", function (event) {
                // jQuery.spinner spinstop is a bit overzealous with its spinstop event.
                if (event.keyCode !== undefined) {
                    // If it has a keyCode someone is typing... so don't interfere
                } else if (event.originalEvent && event.originalEvent.type === "mouseup") {
                    // This is an *actual* spinstop
                    var numberValue = Number(widget.spinner("value"));
                    observable(numberValue);
                }
            });

            // handle disposal
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                widget.spinner("destroy");
            });
        },
        update: function (element, valueAccessor) {
            // [copies model -> field]
            var widget = $(element);
            var observable = valueAccessor();
            var inputValue = Number(widget.spinner("value"));
            var modelValue = observable();
            if (inputValue !== modelValue) {
                widget.spinner("value", modelValue);
            }
        }
    };
}
ko.bindingHandlers.moneyspin = createSpinner({ numberFormat: 'C0', culture: 'en-GB', min: 0, incremental: true });
ko.bindingHandlers.intspin = createSpinner({ numberFormat: 'n0', culture: 'en-GB' });