javascript - knockout 计算仅在 IE 中给出函数预期错误

Question

我得到了一个“SCRIPT5002:预期的功能”，它只在 IE 中出现。我目前正在针对版本 9 进行测试。当我在另一个计算的可观察对象中使用先前定义的计算可观察对象时，就会发生这种情况。

我的应用程序比这复杂一点，所以我用下面更简单的代码重现了错误。错误发生在行 z = self.subtotal(); 中，当您为 Number 1、Number 2 和 Number 3 输入数字(并跳出)时。

这个错误不会在 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" />

Answer 1

这与这个有类似的原因:knockout.js Computed observable called twice in Internet Explorer这是由于在 IE <10 中，Knockout 有一些特殊代码来处理从字段中获取自动完成值。即使该字段像您的情况一样是只读的，它也会这样做。但是，它会检查 autocomplete 属性。所以你可以这样修复它:

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

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

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