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

Question

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

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

Answer 1

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

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

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

修改

（我会离开上面以防万一它可以帮助其他人，即使它没有帮助你）

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

Razor代码在服务器上执行并“翻译”为HTML。

然而，服务器将Javascript视为文本，只是它发送的HTML文档的一部分。

Javascript 在客户端计算机（即浏览器）上执行。

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

强制 Knockout / Javascript格式化您想要的数字，无论语言环境如何（在客户端），您可以使用以下方法编写custom-binding核心：

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

希望fiddle让它更清晰