MVC4 Knockout 数据绑定点击事件未触发答案

【问题标题】：MVC4 Knockout data-bind click event not firingMVC4 Knockout 数据绑定点击事件未触发
【发布时间】：2013-07-31 13:53:29
【问题描述】：

我开始使用 Knockout 并且遇到点击事件未触发的问题。

上面没有触发 GetWaiters 函数。不知道我做错了什么或错过了什么。

TIA

我有以下html：

<h2>Create</h2>
<table>
    <thead>
        <tr>
            <th>WaiterId</th>
            <th>RestId</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Waiters">
        <tr>
            <td data-bind="text: waiter_id"></td>
            <td data-bind="text: rest_id"></td>
            <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>
<br />
@Scripts.Render("~/bundles/myBundle")   
<input type="button" id="btnGetWaiters" value="Get Waiters" data-bind="click: GetWaiters" />

And following in my js file:

var WaiterViewModel = function () {
    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI 
    self.waiter_id = ko.observable("0");
    self.rest_id = ko.observable("0");
    self.name = ko.observable("");

    //The Object which stored data entered in the observables
    var WaiterData = {
        waiter_id: self.waiter_id,
        rest_id: self.rest_id,
        name: self.name
    };

    //Declare an ObservableArray for Storing the JSON Response
    self.Waiters = ko.observableArray([]);

    GetWaiters(); //Call the Function which gets all records using ajax call

    //Function to Read All Employees
    function GetWaiters() {
        alert("fetching");
        //Ajax Call Get All Employee Records
        $.ajax({
            type: "GET",
            url: "/api/WaiterAPI",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Waiters(data); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        //Ends Here
    }
};
ko.applyBindings(new WaiterViewModel());

【问题讨论】：

标签： jquery asp.net-mvc-4 knockout.js

【解决方案1】：

当您尝试绑定点击事件时，绑定方法应该是视图模型的方法，但在您的实现中，GetWaiters() 被声明为私有方法。像这样定义这个方法，然后重试：

self.GetWaiters =  function() {
    // your code
};

【讨论】：

进行了更改并尝试调用它：self.GetWaiters()。我收到以下错误：TypeError: self.GetWaiters is not a function
对不起，我的错。将调用 self.GetWaiters() 移到函数下方，它起作用了。

【解决方案2】：

您的功能很好，但您声明它的方式不正确。

首先尝试检查您的模型console.log(new WaiterViewModel())。你会发现它没有任何名称为GetWaiters() 的函数。回顾@vadim 答案GetWaiters() is declared as private method。

您需要做的就是将GetWaiters() 与您的视图模型相关联。例如，就像你对waiter_id 所做的那样，所以像这样声明它：

self.GetWaiters =  function() { //your code goes here }

调用它使用这个self.GetWaiters()

【讨论】：

【解决方案3】：

小提示

我遇到了类似的问题，即事件单击绑定未触发。就我而言，问题是 拼写错误 函数名。问题是，在这种情况下，淘汰赛非常安静，因为与立即执行的绑定相反，您会在控制台中得到适当的错误。

【讨论】：