I have just started trying knockout.js. The ko.mapping offers a nifty way to get and map data from server. However I am unable to get the mapping to work.

I have a simple model:

//var helloWorldModel;

var helloWorldModel = {

    name: ko.observable('Default Name'),

    message: ko.observable('Hello World Default')

};





$(document).ready(function() {

  ko.applyBindings(helloWorldModel);

      //a button on the form when clicked calls a server class 

      //to get json output

  $('#CallServerButton').click(getDataFromServer);

});



function getDataFromServer() {

  $.getJSON(HelloSpring/SayJsonHello/chicken.json, function(data) { 

    mapServerData(data);

  });

}



function mapServerData(serverData) {

  helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);

  alert(JSON.stringify(serverData));

}

The helloWorldModel has only 2 attributes - exactly the same thing I return from the server. The alert in mapServerData shows -

{name:chicken,message:JSON hello world}

I have looked up other posts regarding similar problem, but none of them seemed to be solve this issue. Maybe I am missing something very basic - wondering if anyone can point it out.

Also note if I do not declare the model upfront and use

 helloWorldModel = ko.mapping.fromJS(serverData);

it is mapping the data to my form correctly.