Mapping

http://knockoutjs.com/examples/helloWorld.html

by db_dev

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
 <div id="testVm">
     The time on the server is: <span data-bind='text: serverTime'></span>
     and <span data-bind='text: numUsers'></span> user(s) are connected. My name is <span data-bind='text: $data.myName'></span>

     <!-- ko foreach: children -->
     <div>
     <span data-bind='text: $data.description'></span>
     <br>
         <span data-bind='text: $data.id'></span>. <span data-bind='text: $data.name'></span>
      
     </div>
     <!-- /ko -->
 </div>

JavaScript

var viewModel;
var myVM;

//First Instanciation
function loadDataFromServer() {
    var data = {
        serverTime: '2010-01-07',
        numUsers: 3,
        myName: 'Bluebird',
        children: [{
            id: 1,
            name: 'Mary'
        }, {
            id: 2,
            name: 'Sammy'
        }]
    }

    var mapping = {

        'children': {
            key: function(data) {
                //Set so the change will key only on the id and not remove/replace the data
                return ko.utils.unwrapObservable(data.id);
            },
           create: function(options){
            	options.data.description = ko.computed(function(){
                 return "Student Name: " + options.data.id + ". " + options.data.name;
             });
             return ko.mapping.fromJS(options.data); 
            }
        }
        /*,
        'myName': {
            update: function(options) {
                // Add to the data
                return options.data + 'foo!';
            }
        },*/

    }
    nodeDataViewModel = ko.mapping.fromJS(data, mapping);
    nodeDataVm = nodeDataViewModel;
    ko.applyBindings(nodeDataVm, document.getElementById("nodeDataVm"));
}

// Update
function updateNodeData() {
    var fromServer = {
        serverTime: '2022-22-2',
        numUsers: 55,
        myName: 'Fishface',
    }
    ko.mapping.fromJS(fromServer, nodeDataVm);
}

function updateNodeData2() {
    var fromServer = {
        serverTime: '2033-30-3',
        numUsers: 165,
        children: [{
            id: 1,
            name: 'Mary Blue'

        }, {
            id: 2,
            name: 'New Name'

        }]
    }
    ko.mapping.fromJS(fromServer, nodeDataVm);
}

loadDataFromServer();
// Update VM in 2 secs and then update again in 2 sec
setTimeout(function() {
    updateNodeData();
}, 2000);
setTimeout(function() {
    updateNodeData2();
}, 4000);