Question

Using knockoutjs, i’m attempting to map a large and complex piece of data. I’m using the revealing module pattern.

In order to make all elements of the object observable, i’m using the mapping plugin. However, i’ve hit an issue: I cannot find, anywhere, an example of using ko.mapping.fromJS() where some initial data is not mapped on the viewmodel object, but is mapped later, after – in my case – an ajax call has been made and some data retrieved. That is, I do not have any initial data, so need the initial mapping to be full of nulls, empties, or defaults.

This is the only info anywhere that is sort of related

Knockout JS mapping plugin without initial data / empty form

but this doesn’t really solve the same problem – or at least, I can’t make it solve the same problem.

And here’s roughly the code i’ve got.

var viewModel = function(){
    var farmyard = *** What?? ***;

    var refreshData = function(){
        var temp = null;
        $.ajax(
            // awesome server call etc
            success: function(data){
                temp = data;
            }
        );
        ko.mapping.fromJS(temp, farmyard);
    };

    return{
            farmyard: farmyard,
            refreshData: refreshData
        }
};

$(function(){
   var vm = new viewModel();
   ko.applybindings(vm);

   $('#something).on('click',function(){
       vm.refreshData();
   });
});

So, my question is, what is the farmyard on the initial load of this object? At the moment I have had to setup empty objects to make this work, handcoding every element of every object, and as mentioned, the object hierarchy being mapped is large and complex, so this is not ideal. Any help much appreciated.

Thanks.

Answer 1

I’ve resolved this by sending an empty data model into the view (this is .NET MVC) as part of the ViewBag property, and using a library called Ngon (https://github.com/brooklynDev/NGon).

public ViewREsult Index()
{
    var massiveDataModel = new MassiveDataModel();

    ViewBag.NGon.Stuff = massiveDataModel;

    return View();
}

And in the script:

var viewModel = function(){
var farmyard = ko.mapping.fromJS(ngon.Stuff);

var refreshData = function(){
    var temp = null;
    $.ajax(
        // awesome server call etc
        success: function(data){
            temp = data;
        }
    );
    ko.mapping.fromJS(temp, farmyard);
};

return{
        farmyard: farmyard,
        refreshData: refreshData
    }
};

    $(function(){
       var vm = new viewModel();
       ko.applybindings(vm);

       $('#something).on('click',function(){
           vm.refreshData();
       });
    });

Was so caught up with trying to solve the problem in a certain way, couldn’t see the obvious solution. Thanks to Tyrsius for the different perspective.