knockout.js with binding -

this basic question in following view model populating self.userdata ajax call. want display information in ui , figured 'with' binding way go.. since self.userdata empty until ajax function called error binding

html

<div data-bind="with: userdata">     <div data-bind="text: userid"></div>      ... </div> 

model

var viewmodel = function () {         var self = this;         self.userdata = {};         self.login =  function(data) {             var postdata = { ..trimmed out.. };             $.ajax({                 type: "post",                 url: "myservice",                 data: postdata             }).done(function (data, status) {                 self.userdata = ko.mapping.fromjs(data, userdata);                 console.log(self.userdata);              }).fail(function (data, status) {                 alert('could not login');             });         }      };     ko.applybindings(new viewmodel()); 

initialize userdata empty observable, set object created the mapping plugin once call return. i.e. change

self.userdata = {}; 

with

self.userdara = ko.observable(); 

and change

self.userdata = ko.mapping.fromjs(data, userdata); 

with

self.userdata(ko.mapping.fromjs(data,userdata));