Knockout - template debugging

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<table>
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>pet</td>
        </tr>
    </thead>
    <tbody>
        <!-- ko template: {name: "peopleTmpl", foreach: people} -->
        <!-- /ko -->
    </tbody>
</table>

<script id="peopleTmpl" type="text/html">
    <div data-bind="text: ko.toJSON($data)"></div>
    <hr/>
    <pre data-bind="text: ko.toJS($data)"></pre>
    <hr/>
    <pre data-bind="text: JSON.stringify(ko.toJS($data), null)"></pre>
    <hr/>
    <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
    <hr/>
    <pre data-bind="text: JSON.stringify(ko.toJS($data), ['name', 'id'], 22)"></pre>
    
    <tr>
        <td data-bind="text: Id"></td>
        <td data-bind="text: ownername"></td>
        <td data-bind="text: petname"></td>
    </tr>
</script>

CSS

ul li{
    padding: 5px;
}
td{
    padding: 5px;
}
.colored{
    background-color: yellow;
}

JavaScript

var Person = function(id, name, pet) {
    this.id = id;
    this.name = name;
    this.pet = pet;
};

var vm = (function() {
    var people = [
        new Person(1, 'Haley', 'Soarin Lauren'),
        new Person(2, 'Maddie', 'Gordy Gort'),
        new Person(3, 'Ella', 'Emily')];
    return {
        people: people
    };
})();

ko.applyBindings(vm);