添加小数格式淘汰赛数数据绑定(Adding decimal formatting to Knocko

2019-08-31 05:36发布

我使用的淘汰赛中填充表中数值:

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
            }))),
...

现在我该怎样表现被填充在十进制fomat数,说.00? 例如。 10.00

目前,它只是显示号码,如10

Answer 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});


Answer 2:

看看这个KO金钱扩展:

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);
});


文章来源: Adding decimal formatting to Knockout number data bindings
标签: knockout.js