按钮单击功能的数据绑定给出了淘汰错误

时间:2012-11-29 17:19:58

标签: knockout.js

我得到错误"无法解析Binding,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>

但是当我这样做时,点击并提供功能名称,上面会出现错误。

这是我的View Modal

function 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提前。

1 个答案:

答案 0 :(得分: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/