Knockout mapping of observable array not seem to work

Question

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
    {
        /// <summary>
        /// Grid body for the grid.
        /// </summary>
        public GridBodyModel GridBodyModel { get; set; }

        /// <summary>
        /// Grid context.
        /// </summary>
        public GridContext GridContext { get; set; }

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

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


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

public class GridHeaderModel
    {
        /// <summary>
        /// List of grid header cells.
        /// </summary>
        public IList<GridHeaderCellModel> 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 post a new MVC model is created and is sent back as Ajax response. This new MVC Model is then simply used to update Global_GridKOModel using ko.mapping which in turn refreshes the grid (with new data) that was constructed earlier on fresh page load. This is how I am doing it.

$.ajax({
        url: destUrl,
        data: dataToSend
        success: function (result) {
            ko.mapping.fromJS(result, Global_GridKOModel);
        },
        error: function (request, textStatus, errorThrown) {
            alert(request.statusText);
        }
    });

Everything is working fine except in the following scenario.

An Ajax request is made for which no result is returned i.e. GridBodyModel and GridHeaderModel is null in the model GridModel. That time grid rightly shows that no record has been found. This is correct. This happens by the following HTML binding.

<!-- When no record is found. -->
<div data-bind="ifnot: GridContext.GridPager.TotalPages() > 0">
    No record(s) were found.
</div>

<!-- This is actual grid table container. This is binded when records are found -->
<div data-bind="if: GridContext.TotalPages() > 0">

Grid construction happens here

</div>

Now after this if another Ajax request is made but this time records are returned (I have checked the response with firebug and it is confirmed that records are indeed returned). This time grid construction happens wherein various observable arrays are accessed. For example, to construct pager for the grid following is a piece of HTML binding I wrote.

<td data-bind="attr:{colspan: GridHeader.Cells().length }">

This time KO throws following error which can be seen in firebug.

Unable to parse bindings. Message: TypeError: GridHeader.Cells is not a function; Bindings value: attr:{colspan: GridHeader.Cells().length }

It work fine so long there are records being returned but it breaks after no record is returned as explained above. Please note GridHeader was null in earlier response when no records were returned. I smell something fishy in ko.mapping. I think there is some problem while mapping observable array.

So what is it that I am not doing right? Anyone please?

Please feel free to ask for clarification if I have not mentioned things clearly.

Thanks in advance.

Answer 1

The actual reason for behavior is that originally GridHeader is javascript object, but when your return call mapping with null for GridHeader property, it will become observable with null value, and on all future updates it will still be an observable.

Workarounds are (choose one):

1. Do not return null values for child models (return empty objects instead) - I think it is preferred way
2. Or - before calling map, run Global_GridKOModel.GridHeader = null; (this will ensure that after update GridHeader will not be an observable)
3. Or - after mapping, call Global_GridKOModel.GridHeader = ko.unwrapObservable(Global_GridKOModel.GridHeader);

Full explanation of behavior you have is in code below (copy on jsfiddle - http://jsfiddle.net/nickolsky/zrBuL/9/ )

console.log('step1');
var vm = ko.mapping.fromJS({ body: { children: [ 1, 2, 3]} });
console.log(vm.body.children()[1]); //prints 2

console.log('step2');
ko.mapping.fromJS({ body: { children: [ 4, 5, 6]} }, vm);
console.log(vm.body.children()[1]); //prints 5

console.log('step3');
//after next call, vm.body is no longer variable - it is now observable
ko.mapping.fromJS({ body: null }, vm);
console.log(vm.body); //prints observable
console.log(vm.body()); //prints null

console.log('step4');
//and it will remain observable for next call
ko.mapping.fromJS({ body: { children: [ 7, 8, 9]} }, vm);
console.log(vm.body().children()[1]); //prints 8
console.log(vm.body().children().length); //prints 3
console.log(vm.body); //prints observable function body
console.log(vm.body()); //prints object

//workaround for null issue - we can reset it to be null instead of null observable
//and it will get original behavior
vm.body = null;
console.log('step5');    
ko.mapping.fromJS({ body: { children: [ 7, 8, 9]} }, vm);
console.log(vm.body.children()[1]); //prints 8 - body is no longer observable again
​

For me it looks like design issue of mapping plugin, I was not able to find a way to customize mapping for child viewmodel properties to make sure they won't become observables if they are null ('copy' functionality will make all inner content as non-observable, unfortunatelly).

Answer 2

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