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);
        }
    };      

Answer 2

I use maskmoney jquery plugin and knockout custom binding.

ko.bindingHandlers.mask = {

    init: function (element, valueAccessor, allBindingsAccessor) {
        ko.bindingHandlers.mask.processar(element, valueAccessor, allBindingsAccessor);
    },

    update: function (element, valueAccessor, allBindingsAccessor) {
        var mask = valueAccessor();
        if (mask.tipo !== 'Currency') {
            ko.bindingHandlers.mask.createMask(element, ko.bindingHandlers.mask.getObservable(mask.mascara));
        }
    },

    getObservable: function (valor) {
        if ($.isFunction(valor)) {
            var res = valor();
            return $.isFunction(res) ? res() : res;
        } else {
            return valor;
        }
    },

    processar: function (element, valueAccessor, allBindingsAccessor) {
        var mask = valueAccessor();
        var maxLeftDigits = mask.hasOwnProperty('maxLeftDigits') ? mask.maxLeftDigits : null;
        var options = null;
        if (maxLeftDigits !== null) {
            options = {
                maxLeftDigits: mask.maxLeftDigits
            };
        }

        switch (mask.tipo) {
            case 'Currency': $(element).maskMoney(options, function (valor) {
                if (mask.hasOwnProperty('value')) {
                    if (mask.value() !== null) {
                        mask.value(valor);
                    }
                }
            }); break;
            default:
                var mascara = ko.bindingHandlers.mask.getObservable(mask.mascara);
                ko.bindingHandlers.mask.createMask(element, mascara);
                break;
        };
    }

Download full source code here