CODEWITHSUNDEEP
javascripthtmlknockout.js
Per Larsen
Per Larsen

Reputation: 1189

KO Computed variable will not update

I have a bit of code I'm working on that is part of a larger budget application. This bit allows a use to input some reoccurring weekly expenses and the app will calculate monthly totals based on the input. Everything is working except the updating of the Monthly Amount in the table when editing an existing entry. The delete feature works updates the total monthly weekly expenses and adding a new entry does the same.

The Weekly Amount in the table comes from the self.weeklyExpense = new weeklyExpense();. This object is created with the following external function.

function weeklyExpense(data) {
      if (!data) {
        this.name = ko.observable();
        this.weeklyAmount = ko.observable('0.00');
        this.monthlyAmount = ko.observable('0.00');
      } else {
        this.name = ko.observable(data.name);
        this.weeklyAmount = ko.observable(data.weeklyAmount);
        this.monthlyAmount = ko.computed(function() {
          console.log(data.weeklyAmount);
          var temp = data.weeklyAmount;
          return total = (Number(temp) * 4.4).toFixed(2);
        })
      }
    }

I have narrowed the problem down to the this.monthlyAmount = ko.computed variable, it isn't updating when the monthlyAmount changes. I have verified in the debugger that the weeklyAmount is changing but the computed variable is not updating. Any help would be greatly appreciated.

Here is a link to a working JS Fiddle example.

Upvotes: 1

Views: 1403

Answers (1)

nemesv
nemesv

Reputation: 139798

You are referencing the wrong property: data.weeklyAmount is not an observable so your computed is not updated.

What you need use is the this.weeklyAmount():

this.monthlyAmount = ko.computed(function() {
  var temp = this.weeklyAmount();
  return total = (Number(temp) * 4.4).toFixed(2);
}, this);

Note the second parameter this which makes the this points to the correct object inside your computed (if you are not using the self pattern as in your ViewModel)

Demo JSFiddle.

Upvotes: 2

Related Questions