Mapping sample

by gurkavcu

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.js"></script>
ID: <input data-bind="value: id" />
Name: <input data-bind="value: name" /> <br/>
<h2>Children</h2>
<ul data-bind="template: { name: 'childTmpl', foreach: children }"></ul>
<script id="childTmpl" type="text/html">
    <li>
        ID: <input data-bind="value: id" />
        Name: <input data-bind="value: name" />
    </li>
</script>
<a href="#" data-bind="click: addChild">Add Child</a><br/>
<button data-bind="click: applyUpdate">Apply update from the server</button>
<hr/>
<h2>ko.mapping.toJSON</h2>
<div data-bind="text: ko.mapping.toJSON(viewModel)"></div>

CSS

input { margin: 2px; }
ul { margin-left: 10px; }

JavaScript

var originalData = {
    id: 1,
    name: "Main",
    children: []
};

var updatedData = {
    id: 1,
    name: "Main",
    children: [ { id: 2, name: "bob" }, { id: 3, name: "ted" } ]
};

function Child(id, name) {
   this.id = ko.observable(id);
   this.name = ko.observable(name);  
}

var options = {
    children: {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);   
        },
        create : function(options) {
           // console.log(options.data);
            return options.data;
        }    
    },    
    ignore : []  
}

var viewModel = ko.mapping.fromJS(originalData, options);

viewModel.counter = 1;
viewModel.addChild = function() {
    viewModel.children.push(new Child(++viewModel.counter, "new"));   
};
    
viewModel.applyUpdate = function() {
    ko.mapping.fromJS(updatedData,viewModel);
}

ko.applyBindings(viewModel);