向 Knockout 数字数据绑定添加十进制格式

Posted 2023-04-14

【中文标题】向 Knockout 数字数据绑定添加十进制格式

【英文标题】：Adding decimal formatting to Knockout number data bindings

【发布时间】：2013-04-15 07:07:27

【问题描述】：

我正在使用敲除来填充表格中的数值：

html：

<tbody data-bind="foreach: commision">
             <tr>
                 <td>
                    <span>R </span><span data-bind="text: Amount"></span>
                 </td>
             </tr>...
</tbody>

Knockout.js 部分涉及金额和佣金

 var vm = 
            commision: ko.observable(),
            futurecommision: ko.observable(),
            commisionpaid: ko.observable(),
            totals: ko.observable(),
            commisionPaid: ko.observable(ko.utils.unwrapObservable(ko.mapping.fromJS(
                Date: null,
                Amount: 0
            ))),
...

现在我如何显示以十进制格式填充的数字，比如 .00 ？ 例如。 10.00

目前只显示数字，例如10

【参考方案1】：

您可以考虑编写一个自定义扩展器来处理这个问题。

一个基本的扩展器是这样的：

ko.extenders.numeric = function(target, precision) 
    var result = ko.computed(
        read: function() 
            return target().toFixed(precision); 
        ,
        write: target 
    );

    result.raw = target;
    return result;
;

然后将其用于您的可观察对象，例如：

var commissionPaid = ko.observable(whatever your value is).extend(numeric: 2);

【讨论】：

+1 就像一个魅力jsfiddle.net/m6ZKZ 注意但是不推荐使用dependentObservable，请改用ko.computed()

谢谢Thewads，谢谢xec，感谢小提琴。我可以添加数字分组的任何方式：即 10 000.00、100 000.00、1 000 000.00 等？

我不明白为什么不，只需要修改上面的代码以可能使用正则表达式来拆分值

@DextrousDave 看看我敲的这个小提琴，应该给你第二个问题的开场白jsfiddle.net/m6ZKZ/1

谢谢你，但你需要在这里给我更多帮助，这对我来说是希腊语。然而，我确实为这个原始问题找到了另一个很好的解决方案，但没有数字分组：jsfiddle.net/rRaHm/2

【参考方案2】：

看看这个 KO Money Extender：

http://jsfiddle.net/digitalbush/R6MPU/

(function()
    var format = function(value) 
        toks = value.toFixed(2).replace('-', '').split('.');
        var display = '$' + $.map(toks[0].split('').reverse(), function(elm, i) 
            return [(i % 3 === 0 && i > 0 ? ',' : ''), elm];
        ).reverse().join('') + '.' + toks[1];

        return value < 0 ? '-' + display : display;
    ;

ko.subscribable.fn.money = function() 
    var target = this;

    var writeTarget = function(value) 
        var stripped=value
            .replace(/[^0-9.-]/g, '');

        target(parseFloat(stripped));
    ;

    var result = ko.computed(
        read: function() 
            return target();
        ,
        write: writeTarget
    );

    result.formatted = ko.computed(
        read: function() 
            return format(target());
        ,
        write: writeTarget
    );

    result.isNegative = ko.computed(function()
        return target()<0;
    );

    return result;
;
)();

//Wire it up
$(function() 
    var viewModel = 
        Cash: ko.observable(-1234.56).money(),
        Check: ko.observable(2000).money(),
        showJSON: function() 
            alert(ko.toJSON(viewModel));
        
    ;


    viewModel.Total = ko.computed(function() 
        return this.Cash() + this.Check();
    , viewModel).money();
    ko.applyBindings(viewModel);
);

【讨论】：

@David 出色的工作。我一直在寻找可写货币价值变量的修复方法。在您所做的基础上，我做了两个更改： 1. 当输入字段中的值发生变化时，它会立即尝试格式化值，即在用户完成输入之前，它会格式化值并在输入字段中进行更新，这是不可取的。因此，我使用 Ratelimit 在延迟 self.Variable= ko.observable().extend( rateLimit: 2000 ).money() 2 后传播更改。此外，在输入字段中，如果删除了值，则会显示 NaN 错误消息。为了处理这个问题，我在格式函数中检查了 IsNaN

太棒了！知道如何国际化这个功能吗？可能是，使用扩展器会使这更容易吗？