具有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/