KnockoutJS and Recursive Template

http://stackoverflow.com/questions/8231888/knockoutjs-and-recursive-template

by mgrcic

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<input data-bind="value:property1" type="text" />
<div data-bind="text:property1" ></div>

<input data-bind="value:property2" type="text" />
<div data-bind="text:property2"  ></div>

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td><input data-bind="value: firstName" type="text"></td>
            <td><input data-bind="value: lastName" type="text"></td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

CSS

ul { margin-left: 10px; }

JavaScript

var data = {
    property1: 'One',
    property2: 'Two',
    people: [
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
};

ko.applyBindings(ko.mapping.fromJS(data));