javascript - Knockout computed gives Function expected error in IE only - Stack Overflow

admin管理员组

文章数量:1346324

I'm getting a "SCRIPT5002: Function expected" that only happens in IE. I'm currently testing against version 9. It happens when I use a previously defined puted observable inside of another puted observable.

My application is a bit more plex than this, so I've reproduced the error with the much simpler code below. The error happens on the line z = self.subtotal(); when you enter a number in for Number 1, Number 2, and Number 3 (and tab out).

This error does not occur in Chrome or Firefox and I've googled for quite a while. Hopefully someone can help un-stick me.

Here is the link to the jsfiddle: /

Here is the javascript:

    function putVars() {
    self = this;
    self.number1 = ko.observable();
    self.number2 = ko.observable();
    self.subtotal = koputed(function () {
        return parseFloat(self.number1()) + parseFloat(self.number2());
    }, self, { deferEvaluation: true });

    self.number3 = ko.observable();
    self.number4 = ko.observable();
    self.total = koputed(function () {
        var x, y, z;
        x = self.number3();
        y = self.number4();
        z = self.subtotal();
        return parseFloat(x) + parseFloat(y) + parseFloat(z);
    }, self, { deferEvaluation: true });
}

$(function () {
    ko.applyBindings(new putVars());
});

Here is the html:

    <h4>Calc 1</h4>
<label for="Number1">Number 1: </label><input id="Number1" type="text" data-bind="value: number1" />
<label for="Number2">Number 2: </label><input id="Number2" type="text" data-bind="value: number2" />
<label for="Subtotal"><b>Subtotal: </b></label><input id="Subtotal" type="text" data-bind="value: subtotal" readonly="readonly" />
<hr />
<h4>Calc 2</h4>
<label for="Number3">Number 3: </label><input id="Number3" type="text" data-bind="value: number3" />
<label for="Number4">Number 4: </label><input id="Number4" type="text" data-bind="value: number4" />
<label for="Total"><b>Total:</b> </label><input id="Total" type="text" readonly="readonly" data-bind="value: total" />

I'm getting a "SCRIPT5002: Function expected" that only happens in IE. I'm currently testing against version 9. It happens when I use a previously defined puted observable inside of another puted observable.

My application is a bit more plex than this, so I've reproduced the error with the much simpler code below. The error happens on the line z = self.subtotal(); when you enter a number in for Number 1, Number 2, and Number 3 (and tab out).

This error does not occur in Chrome or Firefox and I've googled for quite a while. Hopefully someone can help un-stick me.

Here is the link to the jsfiddle: http://jsfiddle/kCmTg/

Here is the javascript:

    function putVars() {
    self = this;
    self.number1 = ko.observable();
    self.number2 = ko.observable();
    self.subtotal = ko.puted(function () {
        return parseFloat(self.number1()) + parseFloat(self.number2());
    }, self, { deferEvaluation: true });

    self.number3 = ko.observable();
    self.number4 = ko.observable();
    self.total = ko.puted(function () {
        var x, y, z;
        x = self.number3();
        y = self.number4();
        z = self.subtotal();
        return parseFloat(x) + parseFloat(y) + parseFloat(z);
    }, self, { deferEvaluation: true });
}

$(function () {
    ko.applyBindings(new putVars());
});

Here is the html:

    <h4>Calc 1</h4>
<label for="Number1">Number 1: </label><input id="Number1" type="text" data-bind="value: number1" />
<label for="Number2">Number 2: </label><input id="Number2" type="text" data-bind="value: number2" />
<label for="Subtotal"><b>Subtotal: </b></label><input id="Subtotal" type="text" data-bind="value: subtotal" readonly="readonly" />
<hr />
<h4>Calc 2</h4>
<label for="Number3">Number 3: </label><input id="Number3" type="text" data-bind="value: number3" />
<label for="Number4">Number 4: </label><input id="Number4" type="text" data-bind="value: number4" />
<label for="Total"><b>Total:</b> </label><input id="Total" type="text" readonly="readonly" data-bind="value: total" />

• javascript
• internet-explorer
• knockout.js
• knockout-2.0

Share Improve this question Follow edited Mar 1, 2013 at 21:29 EJDev asked Mar 1, 2013 at 19:45 EJDevEJDev 6322 silver badges55 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

This has a similar cause to this one: knockout.js Computed observable called twice in Internet Explorer and is caused by the fact that in IE<10, Knockout has some special code to deal with getting an autoplete value from the field. It does this even if the field is read-only as in your case. It does check, however, for the autoplete attribute. So you could fix it like this:

<input id="Subtotal" type="text" data-bind="value: subtotal" autoplete="off" readonly="readonly" />

There is also a bug in Knockout at play here--that it will overwrite a puted observable passed to a two-way binding. This is already fixed in the development version of Knockout to be released as version 2.3.0 (probably in April 2013). To work around this, you can pass the value of the observable to the binding instead of the puted observable itself, like this:

<input id="Subtotal" type="text" data-bind="value: subtotal()" readonly="readonly" />

It appears you've discovered a bug in IE or KnockoutJS, likely exposed by Knockout's bindings, where Knockout is pushing a value into an observable, but in IE9, it overwrites the property.

This doesn't occur on IE10, suggesting it's a bug in IE9. I'd guess Knockout has something where it's checking if some value is a writable observable function and it's being reported incorrectly on IE9.

Interestingly, if you change KO puted to use a read/write, the error ceases:

self.subtotal = ko.puted({
     read: function() { 
         return parseFloat(this.number1()) + parseFloat(this.number2());
     },
     write: function(val) { }
}, self);

Perhaps that is a sufficient work-around?

Please check to see if you observable has a value being passed as a parameter or not. for example budgetlineviewmodel.total = total(5). I have tried using budgetlineviewmodel.total = 5. but with no success.

Knockout Observables are nothing but functions internally and have you have to pass a value inside brackets which internally return the same value.

Chrome is lenient in allowing budgetlineviewmodel.total() to tolerate null value when no parameter is passed.

hope this helps.

Cheers !

budgetlineviewmodel.Save = function () {        
        var currentTotalAmt = $('#txtTotal').val();
        budgetLineViewModel.Total(currentTotalAmt);
}

本文标签： javascriptKnockout computed gives Function expected error in IE onlyStack Overflow