3

我开始使用 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());
4

3 回答 3

8

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

self.GetWaiters =  function() {
    // your code
};
于 2013-07-31T07:11:40.293 回答
2

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

首先尝试检查您的模型console.log(new WaiterViewModel())。你会发现它并没有任何带名字的功能GetWaiters()。回顾@vadim answer GetWaiters() is declared as private method。

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

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

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

于 2013-07-31T10:35:23.850 回答
0

小提示

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

于 2014-02-21T08:59:13.270 回答