knockout js and globalization

Question

I can't figure out how to handle calculations using knockout js and a non us locale. My comma is , and is validated correctly using the jquery.globalization plugin but the knockout calculation is giving me a NaN. Does knockout js support this in any way or does it exist any workarounds?

Example:

Make the cartEditor example on the knockout js site work allowing decimal values in the quantity field and allowing globalized input (, as comma sign) and output formatting

http://knockoutjs.com/examples/cartEditor.html

I need this to work on a asp.net mvc 3 site because I am running the site using the nb-NO culture and the model binder is expecting , as the comma sign

Do you have a sample? If necessary, we could write a quick custom binding to use jquery.globalization API calls. — RP Niemeyer, Sep 15 '11 at 12:44
@RP Niemeyer fantastic help! I might start using it now, knowing you're around :) — balexandre, Sep 15 '11 at 18:02

craigb · Answer 1 · 2011-11-05T09:11:48.577

I did something like this by writing a custom binding that wrapped autoNumeric.js for the formatting. (gist)

ko.bindingHandlers.autoNumeric = function ($) {

    function getElementValue(el) {
        return parseFloat(el.autoNumericGet(), 10);
    }

    function getModelValue(accessor) {
        return parseFloat(ko.utils.unwrapObservable(accessor()), 10);
    }

    return {
        init: function (el, valueAccessor, bindingsAccessor, viewModel) {
            var $el = $(el),
                bindings = bindingsAccessor(),
                settings = bindings.settings,
                value = valueAccessor();

            function updateModelValue() {
                value(getElementValue($el));
            };

            $el.autoNumeric(settings);
            $el.autoNumericSet(getModelValue(value), settings);
            $el.change(updateModelValue);
        },
        update: function (el, valueAccessor, bindingsAccessor, viewModel) {
            var $el = $(el),
                newValue = getModelValue(valueAccessor()),
                elementValue = getElementValue($el),
                valueHasChanged = (newValue != elementValue);

            if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
                valueHasChanged = true;
            }

            if (valueHasChanged) {
                $el.autoNumericSet(newValue);
                setTimeout(function () { $el.change() }, 0);
            }
        }
    };
}

the data binding using this custom autoNumeric binding looks like this:

<input data-bind="autoNumeric:amount, settings:{aSign:'$'}" />

Check out autoNumeric.js extensive options for formatting to see what you can do ewith the settings.

score 2 · Answer 2 · answered Mar 28 '13 at 21:07

Modified it to make it compatible with the latest autoNumeric version (1.9.x)

(function($) {

    function getElementValue(el) {
        return parseFloat(el.autoNumeric('get'), 10);
    }

    function getModelValue(accessor) {
        return parseFloat(ko.utils.unwrapObservable(accessor()), 10);
    }

    ko.bindingHandlers.autoNumeric = {
        init: function (el, valueAccessor, bindingsAccessor, viewModel) {
            var $el = $(el),
                bindings = bindingsAccessor(),
                settings = bindings.settings,
                value = valueAccessor();

            function updateModelValue() {
                value(getElementValue($el));
            };

            if (settings.pSign === 's') {
                settings.aSign = ' ' + settings.aSign;
            } else {
                settings.aSign = settings.aSign + ' ';
            }

            $el.autoNumeric(settings);
            $el.autoNumeric('set', getModelValue(value));
            $el.change(updateModelValue);
        },
        update: function (el, valueAccessor, bindingsAccessor, viewModel) {
            var $el = $(el),
                newValue = getModelValue(valueAccessor()),
                elementValue = getElementValue($el),
                valueHasChanged = (newValue != elementValue);

            if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
                valueHasChanged = true;
            }

            if (valueHasChanged) {
                $el.autoNumeric('set', newValue);
                setTimeout(function () { $el.change() }, 0);
            }
        }
    };
})(jQuery);

You guys saved my day. Do not forget also to check against NaN in the update handler. Especially because "(newValue != elementValue);" will return always true if `newValue` and `elementValue` are both NaN. Such deadly update loop can occure e.g. if you receive model data using ko.mapping having empty array as value. See this fiddle http://jsfiddle.net/jham/sd95e/ — jham, Feb 14 '14 at 19:14

knockout js and globalization

2 Answers2

Linked