2

「バインディングを解析できません、ReferenceError：'calculateTotalPrice'が未定義です;バインディング値：クリック：calculateTotalPrice」というエラーが表示されます

以下は私の簡単なコードスニペットです

<div style="background-color:black; color:white; overflow:scroll; height:350px;width:300px" id="pricesku">
<span id="total" data-bind="text: totalCost"></span> 
<ul data-bind="foreach: price_quantity" style="list-style-type:none;">
<li>                  
<button data-bind="click: calculateTotalPrice(price)">CLICK THIS TO UPDATE TOTAL</button>                   
</li>             
</ul>
</div>

しかし、そうすると、クリックして関数名を指定すると、上記のエラーが発生します。

これは私のビューモーダルです

関数ViewPriceObjectOnWeb（d）{

this.price_quantity = ko.observableArray(d);
this.totalCost = ko.observable(100);
this.calculateTotalPrice = function (p) {
var tp = this.totalCost() + p;
//$('#total').text(tp);
}

}

そして、ドキュメントの準備ができたら、サーバーからデータを取得するAJAX呼び出しを行います（これは正常に機能します）。

$(document).ready(function () {   
var sku = "abcd";
$.ajax({
    url: "/api/values?clientSKU=" + sku, //this would give SKU/Price collection as JSON Serialized object from .NET/Server Side
    dataType: "json",
    asyc: false,
    type: "get",
    success: function (msg) {
    var skuandprice = $.parseJSON(msg);          
    ko.applyBindings(new ViewPriceObjectOnWeb(skuandprice), document.getElementById('pricesku'));
    },
    error: function (jqXHR, textStatus, errorThrown) {
    alert(textStatus + '  ' + errorThrown);
    }
    });
});

誰かが私がここで間違っていることを助けてくれますか（私はそうだと思います）？事前にThx。

4

1 に答える 1

2

ループ内にいる場合foreach、Knockoutは、データバインド内のすべての関数またはプロパティが配列のエントリ内で定義されていることを期待します。この場合は、の値ですprice_quantity。配列を保持するオブジェクトで定義されている関数とプロパティにアクセスするには、$parent識別子を使用します。したがってcalculateTotalPrice、ループ内で使用するには、次のことを行う必要があります。

<li>                  
    <button data-bind="click: $parent.calculateTotalPrice">CLICK THIS TO UPDATE TOTAL</button>                   
</li>

ビューモデル：

function ViewPriceObjectOnWeb(d) {
    var self = this;
    self.price_quantity = ko.observableArray(d);
    self.totalCost = ko.observable(100);
    self.calculateTotalPrice = function (p) {
        var tp = self.totalCost() + p;
        self.totalCost(tp);
    };
}

実例（ハードコードされた価格を使用）：http：//jsfiddle.net/jonhopkins/fn7vc/2/

于 2012-11-29T17:33:31.930 に答える