Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When mapping ko.mapping.fromJS values are null

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.

like image 805
happyZZR1400 Avatar asked Jan 15 '13 11:01

happyZZR1400


2 Answers

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

like image 66
Artem Vyshniakov Avatar answered Nov 06 '22 19:11

Artem Vyshniakov


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);
like image 5
Stokedout Avatar answered Nov 06 '22 20:11

Stokedout