CODEWITHSUNDEEP
knockout.js
Saurabh
Saurabh

Reputation: 674

Knockout JS - not a function error

My HTML Goes like Following:

<td>Total Amount to be Paid: </td>
<td data-bind="text: invoiceAmount() + ' Kr'"></td>
<td>bill:</td>
<td data-bind="text: billAmount()"></td>
<td>Chosen Provision: </td>
<td><input type="text" data-bind="value: chosenProvision()"/>  Kr</td>

JS:

self.invoiceAmount = ko.computed(function(){
        var total = 0;
        if(self.selectedInvoices().length > 0){
            for(var p = 0; p < self.selectedInvoices().length; ++p)
            {
                total += Number(self.selectedInvoices()[p].invoicedArticleFinal);
            }
        }

        return total;
    });

    self.billAmount = ko.computed(function(){
        return self.invoiceAmount() + self.chosenProvision();
    });

    self.chosenProvision = ko.computed(function(){
        if(self.invoiceAmount() < 750){
            return "50";
        } else {
            return (self.invoiceAmount()*0.1);
        }
    });

I keep getting error: self.chosenProvision is not a function.

I also want to be able to modify the chosenProvision from browser that is why it's binding is to a input tag.

Upvotes: 0

Views: 1694

Answers (1)

Roy J
Roy J

Reputation: 43881

To modify a computed, it needs to be a writable computed.

The reason you're getting self.chosenProvision is not a function is that in self.billAmount you're using self.chosenProvision, which is not defined at that point. computeds are executed when they are created (pureComputeds are not)

To have a writable computed, just make your computed definition something like this:

self.chosenProvision = ko.computed({
 read: function(){
     if(self.invoiceAmount() < 750){
            return "50";
        } else {
            return (self.invoiceAmount()*0.1);
        }
 },
 write: function (newValue) {
     // Do whatever with newValue
 }
});

Upvotes: 3

Related Questions