具有onlick事件的Knockout.js Observable Array

Question

嗨，我有一个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>

我的问题是

这是为什么

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

Answer 1

逐点回答：

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

self.LOBModel = returndata;

通过这样做，您覆盖self.LOBModel = ko.observableArray（[]）。 你应该做的是：

self.LOBModel(returndata);

然后你应该看到表中的数据（如果没有其他错误）。 这里要记住的是，如果你创建一个变量observable，你总是需要使用（）-syntax来读取或写入底层值。 如果使用=，则删除可观察的功能。

（2）'$ root.DeleteRecord'的方法是正确的。 'self.DeleteRecord'不起作用，也不会只是DeleteRecord。 什么也有用'$ parent.DeleteRecord'。 问题似乎是你做'DeleteRec'而不是'DeleteRecord'。

（3）你的方法是正确的。 在这一点上删除了我的其他评论，因为在我之下的理查德道尔顿做出了正确的评论，使我在这里输入的内容无效。

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