Knockout JS和逗号作为小数分隔符

Question

我在我的项目中使用Knockout MVC(ASP.NET MVC3,Razor).我现在找不到改变十进制格式.我想用逗号作为小数分隔符.当我使用非敲除Razor帮助器绑定数据时,它会正确呈现它(使用逗号),但是当我使用Knockout绑定进行绑定时,它会使用点作为逗号分隔符来呈现数字.

如何更改使用逗号的十进制格式？

Answer 1

您正在查看服务器和客户端区域设置之间的差异.

您的.NET代码根据服务器区域设置格式化数字,而您的JS代码根据浏览器区域设置格式化数字.

尝试更改浏览器中的区域设置/区域.

编辑:

(我会离开上面以防万一它可以帮助其他人,即使它没有帮助你)

问题是您了解服务器端和客户端之间的差异.

剃刀代码在服务器上执行并"翻译"为HTML.

然而,服务器将Javascript视为文本,而只是将其发送的HTML文档的一部分.

Javascript在客户端机器(即浏览器)上执行.

Razor Helper如何格式化数字取决于服务器上设置的区域设置.然而,javascript将根据浏览器中设置的区域设置格式化数字.

要强制 Knockout/Javascript格式化数字,无论区域设置如何(在客户端),您可以使用以下方法编写自定义绑定:

function formatWithComma(x, precision, seperator) {
    var options = {
        precision: precision || 2,
        seperator: seperator || ','
    }
    var formatted = x.toFixed( options.precision );
    var regex = new RegExp('^(\\d+)[^\\d](\\d{' + options.precision + '})$');
    formatted = formatted.replace(regex, '$1' + options.seperator + '$2');
    return formatted;
}

所以你的绑定看起来像这样:

ko.bindingHandlers.commaDecimalFormatter = {
    init: function(element, valueAccessor) {

        var observable = valueAccessor();

        var interceptor = ko.computed(function() {
            return formatWithComma( observable() );
        }

        ko.applyBindingsToNode( element , { value: interceptor } );

    }
}

然后在你的Razor视图中:

@ko.Bind.Custom("commaDecimalFormatter ", m => m.MyCustom)

(请注意,我从未使用过KnockoutMVC,因此最后一行直接来自更改绑定名称的文档 - 它未经测试.

此外,我使用了一个ko.computed,所以这个绑定是只读的 - 在<input>元素上使用它将是没有意义的.它最好用在一个<span>.你可以使这个实现反向的双向绑定:

ko.computed( {
    read: function() {
        /* method as above */
    },
    write: function(newValue) {
        /* implement reverse */
        observable( newValue );
    }
}

编辑2

希望这个小提琴让它更清晰