When mapping ko.mapping.fromJS values are null

Question

I'm working with knockoutjs and I'm trying to populate ViewModel instance from JSON data. According to knockoutjs documentation I may use this statement:

ko.mapping.fromJS(data, viewModel);

Here is my code :

var pledgeVM=function(){            
      this.name=ko.observable();
      this.Assets=ko.observableArray([]);
      this.StartEdit=function(assetModel){
      };
 };
        pledge = {"name":"Moses","Assets":[{"CityId":13,"commetns":null},{"CityId":14,"commetns":null}]};
        var pledgeVMinstance=new pledgeVM();
        ko.mapping.fromJS(pledge,pledgeVMinstance);

For some reason data not populated (pledgeVMinstance.name() is undefined) unless I change the statement to:

ko.mapping.fromJS(pledge,{},pledgeVMinstance);

Maybe somebody can explain me why things going that way.

Impedimenta

Answer 1

It happened because ko.mapping.fromJS has the following signature:

ko.mapping.fromJS(data, mappingOptions, viewModel);

Where data - is your json data, mappingOptions - is the instructions to mapping plug how to map your date, viewModel - is object to store mapped data.

ko.mapping.fromJS(data) - this syntax will create view model.

ko.mapping.fromJS(data, mappingOptions) - this will create view model with particular options.

ko.mapping.fromJS(data, {}, viewModel) - and this one convers your data without mapping options and put it to view model.

Read the documentation for better understanding: http://knockoutjs.com/documentation/plugins-mapping.html

Covenantor

This is just partially true. If you call with two arguments: ko.mapping.fromJS(data, mappedObject) where the second argument is a "mappedObject" which is already created by the mapping plugin (so it has the __ko_mapping__ property definied) it will treat the second argument as the viewModel and not as the options. See: github.com/SteveSanderson/knockout.mapping/blob/master/…. That is way in the documentation the update sample ko.mapping.fromJS(data, viewModel); works. – Setup

So in documentation when you use 2 prameters -the second is options? so why it sais "ko.mapping.fromJS(data, viewModel);" the second is viewModel? – Impedimenta

Sorry, saw now thw comment below- thank you very much, now i understand – Impedimenta

Thanks, I too should RTFM... I was trying with two options on something just a second ago and could not figure out what was going on. NIce work. – Persaud

Thanks Artem. You saved me a lot of time today. Unfortunately, this change does not make any sense to me. It is working very fine with two parameters from one place but works only with three parameters from other place - ko.mapping.fromJS(returnData.Data, {}, window[dataStoreId]); – Mortal

Answer 2

Based on reading the documentation on Knockout's website, I believe that calling:

var viewModel = ko.mapping.fromJS(data);

Will automatically create you a ViewModel. This means that you don't need to declare a ViewModel yourself as the mapping plugin creates one with observable properties.

After you have called this for the first time you can then use

ko.mapping.fromJS(data, viewModel);

To update your ViewModel data, say after you have loaded more data via an ajax request.

The solution to fix this should be:

var pledge = {"name":"Moses","Assets":[{"CityId":13,"commetns":null},{"CityId":14,"commetns":null}]};

var pledgeVMinstance = ko.mapping.fromJS(pledge);

Commutual

I need to use StartEdit function in my pledgeView Model – Impedimenta