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>
<div>
    <span data-bind="text: id"></span>
</div>

<div>
    <!-- ko foreach: children -->
        <div>
            <span data-bind="text: id"></span> - <span data-bind="text: name"></span>
        </div>
    <!-- /ko -->
</div>

<div>
    <button data-bind="click: selectChild">click me</button>
    <br/>
    <div data-bind="with: selectedChild">
        <span data-bind="text: name"></span>
    </div>
</div>

<pre data-bind="text: ko.mapping.toJSON(viewModel)"></pre>

CSS

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

JavaScript

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

var viewModel = ko.mapping.fromJS(originalData);
viewModel.selectedChild = ko.computed(function() {
    var selectedId = this.selectedId(),
        children = this.children();
    return ko.utils.arrayFirst(children, function(child) {
        return child.id() === selectedId;
    });
}, viewModel);

viewModel.selectChild = function () {
    viewModel.selectedId(3);
}

ko.applyBindings(viewModel);