仅在IE中,Knockout计算给出函数预期的错误

Knockout computed gives Function expected error in IE only

本文关键字:函数 错误 IE Knockout 计算 仅在      更新时间:2023-09-26

我得到一个"SCRIPT5002:预期的功能",只发生在IE中。我目前正在测试版本9。当我在另一个可观察对象中使用先前定义的可观察对象时,就会发生这种情况。

我的应用程序比这更复杂,所以我用下面简单得多的代码重现了这个错误。当您输入数字1,数字2和数字3(并tab out)时,错误发生在z = self.subtotal();行。

这个错误不会发生在Chrome或Firefox,我已经搜索了很长一段时间。希望有人能帮我解开。

这里是jsfiddle的链接:http://jsfiddle.net/kCmTg/

javascript:

    function putVars() {
    self = this;
    self.number1 = ko.observable();
    self.number2 = ko.observable();
    self.subtotal = ko.computed(function () {
        return parseFloat(self.number1()) + parseFloat(self.number2());
    }, self, { deferEvaluation: true });
    self.number3 = ko.observable();
    self.number4 = ko.observable();
    self.total = ko.computed(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());
});

这里是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" />

这有一个类似的原因:Knockout .js计算可观察对象在Internet Explorer中调用两次,这是由于在ie10中,Knockout有一些特殊的代码来处理从字段中获取自动完成值。即使字段是只读的,它也会这样做。但是,它会检查autocomplete属性。所以你可以这样修改:

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

在Knockout中也有一个bug——它会覆盖传递给双向绑定的计算可观察对象。这个问题已经在Knockout的开发版本2.3.0中修复了(可能在2013年4月发布)。为了解决这个问题,你可以将可观察对象的值传递给绑定,而不是传递计算的可观察对象本身,如下所示:

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

看来你已经发现了IE或KnockoutJS中的一个bug,可能是由Knockout的绑定暴露的,其中Knockout将值推入可观察对象,但在IE9中,它覆盖了该属性。

这在IE10上没有发生,这表明这是IE9的一个bug。我猜Knockout有一些东西,它正在检查某些值是否为可写的可观察函数,并且在IE9上被错误地报告。

有趣的是,如果您将KO computed更改为使用读/写,错误就会停止:
self.subtotal = ko.computed({
     read: function() { 
         return parseFloat(this.number1()) + parseFloat(this.number2());
     },
     write: function(val) { }
}, self);

也许这是一个足够的解决方案?

请检查你的可观察对象是否有作为参数传递的值。例如budgetlineviewmodel。Total = Total(5)。我试过使用budgetlineviewmodel。总数= 5。但是没有成功。

Knockout Observables在内部只是函数,你必须在括号内传递一个值,该值在内部返回相同的值。

Chrome是宽大的允许budgetlineviewmodel.total()容忍空值时,没有参数传递。

希望对你有帮助。

干杯!

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