淘汰货币绑定处理程序答案

【问题标题】：KnockOut Currency bindingHandler淘汰货币绑定处理程序
【发布时间】：2017-05-31 15:57:34
【问题描述】：

我正在尝试创建一个 bindingHandler 来显示具有给定格式的货币空间。但是当我想使用那个值时，它必须再次浮动。

例如我想要的是;

money = ko.observable();

给定：

money(1500000.75);

显示：1.500.000,75

像这样。

我用过；

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

作为绑定和

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

作为 html。但是当我输入“1500000.43”时，我什么也看不到。我看到了空格。

我找不到任何答案。

【问题讨论】：

绑定处理程序是你自己写的还是从某个地方复制过来的？

标签： javascript knockout.js currency

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

我使用 maskmoney jquery 插件和淘汰自定义绑定。

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

下载完整源代码here

【讨论】：