checkbox bidirectional binding

by saurus

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<h1 data-bind="text: title"></h1>
<ul data-bind="foreach: data">
    <li>
        <span data-bind="text: xxx"></span>
        <ul data-bind="foreach: Displays">
            <li>
                <input type="checkbox" data-bind="checked: Excluded" />
                <span data-bind="text: xxx() + ' is ' + Excluded()"></span>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$(function() {
    var fromServer = [
        {
        "xxx": "yyy",
        "Displays": [
            {
            "xxx": "yyy",
            "Excluded": false,
            },
        {
            "xxx": "yyy",
            "Excluded": true,
            }
        ]}
    ];
    var viewModel = {
        title: "hi there",
        data: ko.mapping.fromJS(fromServer)
    };


    ko.applyBindings(viewModel);
});