CODEWITHSUNDEEP
javascriptknockout.js
XAF
XAF

Reputation: 1472

Put computed value inside progress bar Knockout js

I have a computed value here, 

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

Which I need to show it in a progress bar , I used knockout observable to bind with the progress bar, but I cannot display it, here is how the progress bar is done.

self.progress = ko.observable(10);

<div data-bind="progress: progress"></div> For now the value in progress bar shows and also the computed value shows 100,

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

But I need to show this total remain percent, on the progress bar,

I tried it in this way , but did not work

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

And
self.progress = ko.observable(self.total_remain_percent()); Need help on putting the value there.

Upvotes: 1

Views: 266

Answers (1)

Tomalak
Tomalak

Reputation: 338228

On a general note, don't call your variables x, y, z and 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);
});

and

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

should work fine, assuming that the progress binding turns the <div> into a progress bar representation.

Upvotes: 1

Related Questions