KnockOut Currency bindingHandler

Question

I'm trying to create a bindingHandler to show money spaces with given format. But when I want to use that value, it must be float again.

For Example what I want is;

money = ko.observable();

Given:

money(1500000.75);

Show: 1.500.000,75

like this.

I used;

ko.bindingHandlers.numericValue = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.registerEventHandler(element, 'change', function (event) {
            var observable = valueAccessor();
            var positions = ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions;

            if (ko.utils.unwrapObservable(allBindingsAccessor().positions) == 0) {
                positions = 0;
            }

            if (isNaN(parseFloat($(element).val())))
                observable(0);
            else {
                if (!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints))
                    observable(parseFloat($(element).val().replace(".", "").replace(",", ".")).toFixed(positions).replace(",", "."));
                else
                    observable(parseFloat($(element).val().replace(".", "").replace(",", ".")).toFixed(positions));
            }
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value != null) {
            var positions = ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions;
            if (ko.utils.unwrapObservable(allBindingsAccessor().positions) == 0) {
                positions = 0;
            }
            var formattedValue = parseFloat(value).toFixed(positions);
            var finalFormatted = formattedValue;
            if (!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints))
                finalFormatted = ko.bindingHandlers.numericValue.withCommas(formattedValue);
            ko.bindingHandlers.value.update(element, function () { return finalFormatted; });
        }
    },
    defaultPositions: 2,
    noDecimalPoints: false,
    withCommas: function (original) {
        original += '';
        x = original.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? ',' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + '.' + '$2');
        }
        return x1 + x2;
    }
};

as a binding and

  <input class="actTextBox" placeholder="" data-bind="numericValue: money">

as html. But I when I type "1500000.43", I see nothing. I see whitespace.

I couldn't find any answer.

Answer 1

Try this:

ko.bindingHandlers.currency = {
        update: function(element, valueAccessor){
            // retrieve observable value
            var value = ko.utils.unwrapObservable(valueAccessor()) || 0;
            //convert to number of string
            value = + value;
            //format currency
            var formattedText =  "$" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
            //apply formatted text to the underlying DOM element
            $(element).text(formattedText);
        }
    };