尝试使用Knockout添加删除数据绑定函数时出错

Question

我在一个项目中使用Knockout和Asp.net，我在使用Knockout添加删除操作时遇到了一些问题

一切正常，数据绑定也做得很好。但是当我尝试添加一个删除函数时，我得到这个错误:

JavaScript运行时错误:无法获取未定义或空引用的属性'deleteArticle'

我的javascript:

    // Class to represent an article
function article(data) {
    //var self = this;
    this.id = ko.observable(data.OrderId);
    this.Type = ko.observable(data.Type);
    this.Price = ko.observable(data.Price);
    this.Quantity = ko.observable(data.Quantity);
}

    function viewModel() {
    var self = this;
    self.Articles = ko.observableArray([]);
    $.getJSON("@Url.Action("../home/AjaxArticles")", function (allData) {
        var mappedArticles = $.map(allData, function (item) { return new article(item) });
        self.Articles(mappedArticles);
    });
    // Delete an article
    self.deleteArticle = function (ArticleData) {
        self.Articles.remove(ArticleData);
    };

    self.MyMoney = ko.observableArray([]);
    $.getJSON("@Url.Action("../home/AjaxMoney")", function (allData) {
        var mappedMoney = $.map(allData, function (item) { return new Money(item) });
        self.MyMoney(mappedMoney);
    });

}
$(document).ready(function () {
    ko.applyBindings(viewModel);
});

HTML部分我使用knockout:

    <tbody data-bind="foreach: Articles">
    <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: Price"></td>
        <td data-bind="text: Type"></td>
        <td data-bind="text: Quantity"></td>
        <td><a href='#' data-bind="click: $root.deleteArticle">Cancel</a></td>
    </tr>
</tbody>

我做错了什么?

Answer 1

您没有正确实例化您的视图模型(相反，您传入了函数对象本身)。当您应用KO绑定时，传入viewmodel的新实例，如下所示:

ko.applyBindings(new viewModel());

看到小提琴