Fetching or sending data from a form using knockout.js

Question

Newbie in Knockout, also a front-end designer so I need plain talk.

I have a form that I need to send to the database and then retrieve from the database later.

Please explain in very simple terms how to produce a working example to illustrate saving and posting a form?

From knockout tutorial: http://knockoutjs.com/documentation/json-data.html I understand about getting and sending json data. How is the json data being matched to the form? What is mapping and is there a plugin or easy example of how to map the json data back to my form? Basically, how do I do what is commented inside the knockout code examples below?

Fetch Data:

$.getJSON("/some/url", function(data) {
    // Now use this data to update your view models,
    // and Knockout will update your UI automatically
})

Send Data:

var data = /* Your data in JSON format - see below */;
$.post("/some/url", data, function(returnedData) {
    // This callback is executed if the post was successful    
})

Answer 1

simple form

 <form data-bind="submit: onSubmit">
    <input data-bind="value : firstName"/>
    <input data-bind="value : lastName"/>
    <input type="submit" text="Submit!"/>
</form>
Response: <span data-bind="text : response"></span>

simple view model

var viewModel = new function()
{
    var self = this;
    self.firstName = ko.observable("default first");
    self.lastName = ko.observable("default last");
    self.responseJSON = ko.observable(null);
    self.onSubmit = function() 
    {
        var data = JSON.stringify(
            {
                first : self.firstName(), last : self.lastName()        
            }); // prepare request data
        $.post("/echo/json", data, function(response) // sends 'post' request
        {
            // on success callback
            self.responseJSON(response);
        })
    }
}

ko.applyBindings(viewModel);  

JSFiddle DEMO