knockout mapping - multiple data sources into one view model

Question

I'm currently trying to break down a large section of data, which is provided by a $ajax call to a .NET webservice, that is causing a script timeout on the page when the data is being mapped to a Knockout view model. I noticed in the documentation that you should be able to bind multiple data sources to one viewmodel, like so:

var viewModel = ko.mapping.fromJS(alice, aliceMappingOptions);
ko.mapping.fromJS(bob, bobMappingOptions, viewModel);

I've tried this in my own code, as shown below, and on the first pass I bind to a new view model and then on subsequent passes I attempt to rebind to the same view model:

if(currLoadIndex == 0)
{
    currViewModel = ko.mapping.fromJS(data, mappingOptions);
}
else{
    ko.mapping.fromJS(data, mappingOptions, currViewModel);
}

However, this just leaves me with the last section of data I've loaded when I bind it to my template. I've tried setting a key in my 'mappingOptions' but that hasn't helped. Can anybody see anything obvious which I'm doing wrong? Any help would be much appreciated.

Can you post a jsfiddle of a more complete view model and perhaps include a sample of the JSON data returned by your webservice? Typically each set of data would be represented either by an observableArray or a completely separate viewmodel depending on how you want to use the data. — 79IT

Adam Adam · Accepted Answer · 2013-04-09T14:18:43

Probably not the best solution out there but this fixed my problem:

if(currLoadIndex == 0)
{
     currViewModel = ko.mapping.fromJS(data, mappingOptions);
}
else{
     var tmpModel = ko.mapping.fromJS(data, mappingOptions);
     for(i = 0; i < tmpModel.GetProductListResult().length; i++)
     {
         currViewModel.GetProductListResult().push(tmpModel.GetProductListResult()[i]);
     }
}

knockout mapping - multiple data sources into one view model

1 Answers