Knockout.js Observable Array with onlick event

Question

Hi I have a web application, I'm very new to KnockOut.js

I have my 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");
        }
    });
};

}

Details My Json is in the following format [0] = > { LOB_ID : 0 , LOB_Name : "data" LOB_description : "data" } [1] => and so on

HTML File

        <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>

My Question is

why is that

1. i have to use vm to bind the json into LOADModel so that it works, when i use self.LOBModel = ko.observableArray([]); the binding does not happen. ie, my table does not load the data.
2. my Onlick does not get triggered in both the version of the code, I've tried self.DeleteRec, $root.DeleteRec and just DeleteRec as well. Though seems very obvious it just doesnot work.
3. Would the DeleteRec know which record i'm deleting. is lobmodel.LOB_ID correct way to use ?

Answer 1

To answer point by point:

(1) Your problem is in the GetLOB function, on this line:

self.LOBModel = returndata;

By doing that, you overwrite the self.LOBModel = ko.observableArray([]). What you should do instead is this:

self.LOBModel(returndata);

Then you should see the data in your table (if you have no other errors). The thing to remember here, is that if you make a variable observable, you always need to use the ()-syntax to read or write the underlying value. If you use = instead, you erase the observable functionality.

(2) the approach with '$root.DeleteRecord' is correct. 'self.DeleteRecord' would not work, and neither would just DeleteRecord. What would also work is '$parent.DeleteRecord'. The problem seems to be that you do 'DeleteRec' instead of 'DeleteRecord'.

(3) your approach is the right one. Deleted my others comments on this point, since Richard Dalton below me made a correct comment that invalidates what I typed here.

Edit: working Fiddle http://jsfiddle.net/LFgUu/4/