Mapping sample

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <tr>
        <td data-bind="text: name"></td>
    </tr>
    <tr data-bind="if: children().length > 0">
        <td>
            <select data-bind="options: children,
                optionsText: function(item){
                    return item.name;
                        }, 
                optionsCaption: 'Choose...'"></select>       
        </td>
    </tr>
</table>
 
<pre data-bind="text: ko.toJSON(viewModel)"></pre>

CSS

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

JavaScript

var originalData = {
    id: 1,
    name: "Main",
    children: [ { id: 2, name: "bob", children: []}, { id: 3, name: "ted", children: [{id: 5, name:"albert"}, {id: 9, name: "fred"}]} ],
    selectedChild:  { id: 2, name: "bob" }
};

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


ko.applyBindings(viewModel);