javascript - 带有onclick事件的Knockout.js可观察数组

嗨，我有一个Web应用程序，我对KnockOut.js很陌生

我有我的JS COde

ko.applyBindings(new LOBViewModel());
//COMMENTED SECTION BINDS THE DATA TO HTML, BUT DOES NOT TRIGGER ONLICK EVENT
//function LOBViewModel() {
//    var self = this;

//    self.vm = {
//        LOBModel: ko.observableArray()
//    };

//    GetLOB();
//
//    self.DeleteRecord = function (lobmodel) {
//        $.ajax({
//            type: "POST",
//            url: '/Admin/DeleteLOB',
//            data : {LOB_ID : lobmodel.LOB_ID},
//            success: function (data)
//            {
//                alert("Record Deleted Successfully");
//                GetLOB();//Refresh the Table
//            },
//            error: function (error)
//            {
//            }
//        });

//    };
//    function GetLOB() {
//        $.ajax({
//            url: '/Admin/GetLOB',
//            type: "POST",
//            dataType: "json",
//            success: function (returndata) {
//                self.vm.LOBModel = returndata;
//                ko.applyBindings(self.vm);
//                alert("Hello");

//            },
//            error: function () {
//            }
//        });
//    };
//}
//UNCOMMENTED SECTION DOES NOT BIND THE DATA TO HTML
function LOBViewModel() {
    var self = this;
self.LOBModel = ko.observableArray([]);

GetLOB();

self.DeleteRecord = function (lobmodel) {
    $.ajax({
        type: "POST",
        url: '/Admin/DeleteLOB',
        data: { LOB_ID: lobmodel.LOB_ID },
        success: function (data) {
            alert("Record Deleted Successfully");
            GetLOB();//Refresh the Table
        },
        error: function (error) {
        }
    });

};

function GetLOB() {
    $.ajax({
        url: '/Admin/GetLOB',
        type: "POST",
        dataType: "json",
        success: function (returndata) {
            self.LOBModel = returndata;
            alert(self.LOBModel.length);
        },
        error: function () {
            alert("eRROR GET LOB");
        }
    });
};

}

细节
我的Json格式如下
[0] => {LOB_ID：0，LOB_Name：“ data” LOB_description：“ data”}
[1] =>依此类推

HTML文件

        <tbody data-bind="foreach: LOBModel">
        <tr>
            <td data-bind="text:LOB_ID"></td>
            <td data-bind="text: LOB_Name"></td>
            <td data-bind="text: LOB_Description"></td>
            <td><button data-bind="click: $root.DeleteRec">Delete</button></td>

        </tr>
    </tbody>

我的问题是

这是为什么


我必须使用vm将json绑定到LOADModel中，这样它才能工作，当我使用self.LOBModel = ko.observableArray([]);时，绑定不会发生。即我的表格未加载数据。
我的Onlick不会在两个版本的代码中都触发，我也尝试过self.DeleteRec, $root.DeleteRec and just DeleteRec。尽管看起来很明显，但它根本不起作用。
DeleteRec是否知道我要删除的记录。是lobmodel.LOB_ID的正确使用方法吗？

最佳答案

逐点回答：

（1）您的问题出在GetLOB函数中，在这一行：

self.LOBModel = returndata;

这样，您将覆盖self.LOBModel = ko.observableArray（[]）。相反，您应该做的是：

self.LOBModel(returndata);

然后，您应该在表中看到数据（如果没有其他错误）。这里要记住的事情是，如果使变量可观察，则始终需要使用（）语法来读取或写入基础值。如果使用=代替，则会删除可观察的功能。

（2）使用'$ root.DeleteRecord'的方法是正确的。 'self.DeleteRecord'将不起作用，DeleteRecord也将不起作用。也可以使用'$ parent.DeleteRecord'。问题似乎是您执行“ DeleteRec”而不是“ DeleteRecord”。

（3）您的方法是正确的。由于我下面的理查德·道尔顿（Richard Dalton）做出的正确评论使我在此处输入的内容无效，因此删除了我在此点上的其他评论。

编辑：工作小提琴
http://jsfiddle.net/LFgUu/4/

关于javascript - 带有onclick事件的Knockout.js可观察数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21018756/