javascript - 将计算值放入进度条 Knockout js

Question

我这里有一个计算值，

self.total_remain_percent = ko.computed(function() {
            var x = 0;
            var y = 0;
            var z = 0;
            var a = 0;
            $.each(self.paymentPlan(), function (index, item) {
                x += parseFloat(item.total_paid());
            });
            $.each(self.paymentPlan(), function (index, item) {
                y += parseFloat(item.total_payment());
            });
            a = y-x ;
            z = (a/y) * 100;
            return z.toFixed(0);
        });

我需要在进度条中显示它，我使用knockout observable与进度条绑定(bind)，但我无法显示它，这是进度条的完成方式。

self.progress = ko.observable(10);

<div data-bind="progress: progress"></div>目前进度条中显示的值以及计算值显示 100，

<span data-bind="text : $data.total_remain_percent"></span>

但我需要在进度条上显示总剩余百分比，

我按照这个方法尝试过，但没有成功

self.progress = ko.observable(self.total_remain_percent);

还有
self.progress = ko.observable(self.total_remain_percent());需要帮助将值放在那里。

Answer 1

一般来说，不要将变量命名为 x , y , z和a .

self.total_remain_percent = ko.computed(function() {
    var totalPaid = 0;
    var totalPayment = 0;
    var remain = 0;
    var remainPercent = 0;
    ko.utils.arrayForEach(self.paymentPlan(), function (item) {
        // Why aren't item.total_paid and item.total_payment numbers?
        // There should not be any calls to parseFloat() here.
        totalPaid += parseFloat(item.total_paid());
        totalPayment += parseFloat(item.total_payment());
    });
    remain = totalPayment - totalPaid;
    remainPercent = remain / totalPayment * 100;
    // this is all about numbers, so let's return a number (toFixed returns strings)
    return Math.round(remainPercent);
});

和

<div data-bind="progress: total_remain_percent"></div>

应该可以正常工作，假设 progress绑定(bind)变成 <div>进入进度条表示。