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

【问题标题】：Knockout JS and comma as decimal separatorKnockout JS 和逗号作为小数分隔符
【发布时间】：2012-12-03 12:17:01
【问题描述】：

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

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

【问题讨论】：

也许这可以帮助你：stackoverflow.com/questions/2901102/…
@sphair，感谢您提供此链接。如果我确切地知道将值分配给控件的位置，这将对我有所帮助。它发生在 KnockoutJS 代码中的某个地方，但我不知道在哪里（代码太复杂了）。
抱歉，我没发现你在使用 Knockout MVC，以为是普通的 Knockout。
Knockout MVC 在下面使用普通的 Knockout。但是，我仍然不知道该怎么做。
请看我的回答。这是问题吗？如果没有，请告诉我 - 可能还有其他尝试。

标签： asp.net-mvc-3 knockout.js knockout-mvc

【解决方案1】：

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

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

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

编辑：

（我将离开上述内容，以防它对其他人有所帮助，即使它对您没有帮助）

问题在于您对服务器端和客户端之间差异的理解。

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

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

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

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

要强制敲除/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 更清楚

【讨论】：

嗨！感谢您的回答，但这不是浏览器中语言环境/区域的问题。它设置正确。此外，在同一页面上，我使用标准 Razor 助手绑定了相同的属性，它工作正常。
嗨！第一部分确实有帮助。谢谢！但不幸的是，我完全是 JavaScript 傻瓜，我不知道如何在您将 cmets 放入 ko.computed 的地方实现代码。
我添加了指向fiddle 的链接。是不是更清楚了？
非常感谢！你的回答对我帮助很大！