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

Question

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

我有我的 JS 代码

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:“数据” LOB_描述:“数据”}[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>

我的问题是

这是为什么

1. 我必须使用 vm 将 json 绑定(bind)到 LOADModel 中，以便当我使用 self.LOBModel = ko.observableArray([]); 绑定(bind)时它可以工作不会发生。即我的表没有加载数据。
2. 我的 Onlick 在这两个版本的代码中都没有被触发，我也尝试过 self.DeleteRec、$root.DeleteRec 和只是 DeleteRec 。虽然看起来很明显，但它不起作用。
3. DeleteRec 是否知道我要删除哪条记录？ lobmodel.LOB_ID 的使用方法是否正确？

Answer 1

逐点回答:

(1) 您的问题出在 GetLOB 函数中，在这一行:

self.LOBModel = returndata;

通过这样做，您将覆盖 self.LOBModel = ko.observableArray([])。你应该做的是这样的:

self.LOBModel(returndata);

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

(2) '$root.DeleteRecord' 的方法是正确的。 “self.DeleteRecord”不起作用，而且仅删除记录也不起作用。也可以使用“$parent.DeleteRecord”。问题似乎是您执行“DeleteRec”而不是“DeleteRecord”。

(3) 你的方法是正确的。删除了我对这一点的其他评论，因为我下面的理查德·道尔顿(Richard Dalton)做出了正确的评论，使我在此处输入的内容无效。

编辑:工作 fiddle http://jsfiddle.net/LFgUu/4/