逗号分隔数字的敲除 bindingHandler

Question

我正在使用 KnockoutJS 构建一个数字非常多的应用程序，我希望能够格式化大数字，以便它们以逗号分隔且美观 (xxx,xxx)。

正如您将在下面的小提琴中看到的那样，我确实可以通过使用简单的 RegEx 将绑定值包装在格式化函数中来实现这一点，但这样做的问题是这会覆盖输入中的值并插入 ', ' 到基础价值中。

较大的数字在应用程序的下游使用，因此为了防止出现 NaN 错误，我必须将数据属性分配给包含不带 ',' 的值的输入值，这是存储在 sessionStorage 中的值。

我觉得我的 HTML 标记不必要地臃肿，并相信我想要实现的目标可以通过 bindingHandler 实现，但我的绑定处理程序并不完全在那里。

小提琴：http://jsfiddle.net/36sD9/2

formatLargeNumber = function (number) {
    if (typeof (number) === 'function') {
        return number().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
}

ko.bindingHandlers.largeNumber = {
    init: function(element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        var interceptor = ko.computed({
            read: function() {
                return formatLargeNumber(value);
            },
            write: function(newValue) {
                value(reverseFormat(newValue));
            }
        });

        if(element.tagName == 'input' )
            ko.applyBindingsToNode(element, {
                value: interceptor
            });
        else
            ko.applyBindingsToNode(element, {
                text: interceptor
            });
    }
}

有什么想法吗？

Answer 1

您当前的方法存在多个问题：

• element.tagName 返回 INPUT 等，因此在进行比较时需要注意大小写。

• var value = ko.unwrap(valueAccessor()); 你正在解开你的 observable，所以在你的计算中你使用的是它的值而不是函数本身。所以你只需要var value = valueAccessor(); 并且你需要在你计算的read 方法中调用ko.unwrap。

• 您不仅需要格式化，还需要在write 方法中“取消格式化”，但您的formatLargeNumber 只做格式化方向。

• 您在同一输入上应用了value 和largeNumber，这使得这两个绑定相互干扰

• 不要自己编写格式化代码，只需使用已经这样做的库：http://numeraljs.com/

所以这里是使用 numericjs 绑定的更正版本：

ko.bindingHandlers.largeNumber = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        var interceptor = ko.computed({
            read: function() {
                return numeral(ko.unwrap(value)).format('0,0');
            },
            write: function(newValue) {
                value(numeral().unformat(newValue));
                value.valueHasMutated();
            }
        }).extend({notify: 'always'});
        if(element.tagName.toLowerCase() == 'input' )
            ko.applyBindingsToNode(element, {
                value: interceptor
            });
        else
            ko.applyBindingsToNode(element, {
                text: interceptor
            });
    }
}

并像这样使用它：

<input data-bind="largeNumber: testVal">    

演示JSFiddle.