Problem with Knockout mapping of observable array.

[AumSingh]

I am using knockout (KO) in my MVC project. I create an MVC model (for a grid) on server and pass it to the view. On the view it is serialized and converted into a KO model (using ko.mapping) which in turn is used for binding. That binding is then used in HTML for grid creation. This is how my MVC grid model looks like which in turn gets converted to corresponding KO model by ko.mapping:

public class GridModel
{
/// /// Grid body for the grid.
///
public GridBodyModel GridBodyModel { get; set; }

    /// /// Grid context.
    /// 
    public GridContext GridContext { get; set; }

    /// /// Grid header for the grid.
    /// 
    public GridHeaderModel GridHeader { get; set; }
}

public class GridBodyModel
{
/// /// List of grid body rows.
///
public IList Rows { get; set; }
}

public class GridContext
{
/// /// Total number of pages. Read-only.
///
public int TotalPages{ get; set; }
}

public class GridHeaderModel
{
/// /// List of grid header cells.
///
public IList Cells { get; set; }
}

As it is clear the main model class GridModel is made of following classes which are present as properties: GridBodyModel: Has list of rows to be rendered in the grid body. GridContext: Has total number of pages as a property. It has other properties as well but that is out of scope of this discussion. GridHeaderModel: Has a list of cells that has to be displayed in header of the grid. Then I have this script that will execute on fresh page load.

$(document).ready(function () {
// Apply Knockout view model bindings when document is in ready state.
ko.applyBindings(Global_GridKOModel, document.getElementById("gridMainContainer"));
});

// Serialize the server model object. It will be used to create observable model.
Global_GridKOModel = ko.mapping.fromJS (<%= DataFormatter.SerializeToJson(Model) %>);

Global_GridKOModel is global javascript variable. Model is the MVC grid model coming from server. A user can perform further search on the page again. I handle this by posting new search criteria via Ajax. On this

[AumSingh]

I figured it out last night. Actually this was very basic mistake that I was making. I was trying to access an array after setting it to null. I will explain it how. When result were returned that time GridHeaderModel and the IList Cells in it were defined i.e. were not null. That time ko.mapping was able to convert the model and create the model and arrary inside it. But when any ajax request were made wherein noo result was returned and GridHeaderModel was null, obviously the IList Cells was null too. That time ko.mapping did the same, the KO model that it updated, set GridHeaderModel to null too and the observable array Cells inside was no present which is as good as null. Now when I made another ajax request with some records returned, the ko.mapping tried to update the observable array Cells which did not exist (or was set to null) in KO model on the client, it failed. If instead of ajax it were fresh page load everything would have worked. So the solution is not to return any enumeration (those that will get converted to observable array) uninitialized to the client for KO model update. Hence when no record was to be returned I made sure that GridHeaderModel is not null and also made sure that the IList Cells is initialized though it did not contained any element. This fixed the problem. This problem could be explaied with following example.

public class Demo
{
public IList DemoArray;
}

public class DemoUser
{
public void UseDemo()
{
var demoInstance = new Demo();
demoInstance.DemoArray.Add("First Element");
}
}

Here in the UseDemo() method we have initialized the class instance Demo but the IList DemoArray remains un-initialized. So when we try to access it runtime exception will be thrown. This is what was happening in my case. In first ajax response I was setting the observable array to null i.e. un-initializing it and then in next ajax response I was trying to access it.