2013-03-01 3 views
6

IEでのみ発生する「SCRIPT5002:Function expected」が表示されています。私は現在、バージョン9に対してテストしています。それは、以前に定義された計算された観測可能な別の観測可能な観測可能な内部を使用するときに発生します。ノックアウト計算により、IEでの関数の予想エラーのみが返される

私のアプリケーションはこれより少し複雑ですので、私は以下の非常に簡単なコードでエラーを再現しました。エラー番号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" /> 

答えて

7

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もあります - それは2ウェイバインディングに渡された計算に観察を上書きすること。これは、バージョン2.3.0(おそらく2013年4月)としてリリースされるKnockoutの開発版ではすでに修正されています。

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

問題ともう少し簡潔な修正についてもう少し明確にしてくれてありがとう。私はすでにこのオプションを見る前にユダの解決法を実装していましたが、この議論とは無関係の他の理由でそれを残しました。私はこれがもっと正確な答えだと信じています。 – EJDev

+0

同様の問題があり、2番目の修正を使って 'data-bind'の値に'() 'を入れて修正できました。それは素晴らしい仕事です。 – vapcguy

3

あなたがバグを発見した表示されますIEやKnockoutJS、ノックアウトのバインディングで公開されている可能性があります。Knockoutは値をオブザーバブルにプッシュしていますが、IE9ではそのプロパティを上書きします。

これはIE10では発生していないため、IE9のバグです。私はノックアウトは、いくつかの値が書き込み可能な観測可能な関数であり、それがIE9で間違って報告されているかどうかをチェックしていると思います。あなたが読み取り/書き込みを使用するように計算されたKOを変更した場合

興味深いことに、エラーが止む:

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

おそらくそれは十分な回避策ですか?

+1

この回避策はまったく問題ありません。あなたの助けをありがとう! – EJDev

0

あなたは、観察パラメータとしてかない値渡されたかどうかを確認してください:この問題を回避するには、次のように、自ら計算し、観察するのではなく、結合に観察できるの値を渡すことができます。たとえば、budgetlineviewmodel.total = total(5)です。私はbudgetlineviewmodel.total = 5.を使ってみましたが、成功しませんでした。

ノックアウトオブザーバブルは内部的には何も関数ではなく、内部的に同じ値を返す角括弧内に値を渡す必要があります。

Chromeは、パラメータが渡されていないときにbudgetlineviewmodel.total()がnull値を許容することに寛容です。

これが役に立ちます。

乾杯!

budgetlineviewmodel.Save = function() {   
     var currentTotalAmt = $('#txtTotal').val(); 
     budgetLineViewModel.Total(currentTotalAmt); 
} 
関連する問題