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

时间:2013-03-01 19:45:36

标签: javascript internet-explorer knockout.js knockout-2.0

我得到一个“SCRIPT5002:功能预期”,只发生在IE中。我正在测试版本9.当我在另一个计算的observable中使用先前定义的计算observable时,会发生这种情况。

我的应用程序比这复杂一点,所以我用下面更简单的代码重现了这个错误。当您输入数字1,数字2和数字3(以及标签输出)中的数字时,行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" />

3 个答案:

答案 0 :(得分:7)

这有一个与此类似的原因:knockout.js Computed observable called twice in Internet Explorer并且是由于在IE&lt; 10中,Knockout有一些特殊代码来处理从字段中获取自动完成值的事实。即使字段是只读的,它也会这样做。但是,它会检查autocomplete属性。所以你可以像这样解决它:

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

这里还有一个bug in Knockout - 它将覆盖传递给双向绑定的计算observable。这已经在Knockout的开发版本中修复,将作为版本2.3.0发布(可能在2013年4月)。要解决此问题,您可以将observable的值传递给绑定而不是计算的observable本身,如下所示:

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

答案 1 :(得分:3)

看来你发现了IE或KnockoutJS中的一个错误,可能是由Knockout的绑定暴露出来的,其中Knockout正在将值推入一个observable,但在IE9中,它会覆盖该属性。

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

有趣的是,如果您更改KO计算以使用读/写,则错误将停止:

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

也许这是一个充分的解决方法?

答案 2 :(得分:0)

请检查您的observable是否有值作为参数传递。例如budgetlineviewmodel.total = total(5)。我尝试过使用budgetlineviewmodel.total = 5.但没有成功。

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

Chrome在允许budgetlineviewmodel.total()在没有传递参数时容忍null值方面很宽松。

希望这会有所帮助。

干杯!

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