How to bind Knockout.js to existing table grid?

Question

I'm a newbie to Knockout.js. I implemented the Knockout.js by loading data from ajax source and use foreach loop to create a table of the data. The tutorial i followed is here

http://www.dotnetcurry.com/ShowArticle.aspx?ID=933

My issue here is, due to the nature of my application, I find that the first load is better served from the server side using a grid component and I only want Knockout.js to take care of "Add" row, "Update" a row and "delete" a row.

My question is,

1) how do I replace the "first" load and populate the lookupCollection :ko.observableArray() in the article with the default data in the html table? 2) Related to #1. If the first load, the table layout with data is constructed from the server side, then how do I bind "foreach" to the grid so "add" can be performed on lookupCollection?

Thanks and again, I'm a newbie, I must be missing some key concepts here.

Bradley Trager Bradley Trager · Accepted Answer · 2013-08-27T15:03:51

One way would be to pass your initial data into your view model. Since you are using asp.net it would look something like this:

//Dump raw data into javascript variable
var data = @Html.Raw(ViewBag.Data);

function ViewModel(data) {
    var self = this;
    //Unpack raw data
    self.lookupCollection = ko.observableArray(data.lookupCollection);
}

//initialize view model
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);

How to bind Knockout.js to existing table grid?

1 Answers