Ошибка при попытке добавить функцию удаления привязки данных с помощью Knockout

Я работаю с 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, где я использую нокаут:

    <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>

Что я делаю неправильно?