Knockout - self closing <td/> and <span/>

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
SPAN
<ul>
<!-- ko foreach: people -->
    <li>
        <span data-bind="text: id"></span>
        <span data-bind="text: name"></span>
        <!-- ko foreach: numbers -->
        <span data-bind="text: $data" class="colored"></span>
        <!-- /ko -->
    </li>
<!-- /ko -->
</ul>        

<br/>

<br/>
TD<br/>
<table>
    <tbody>
        <!-- ko foreach: people -->
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <!-- ko foreach: numbers -->
            <td class="colored"><span data-bind="text: $data"></span></td>
            <!-- /ko -->
    
        </tr>
        <!-- /ko -->
    </tbody>
</table>

CSS

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

JavaScript

var Person = function(id, name) {
    this.id = id;
    this.name = name;
    this.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
};

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

ko.applyBindings(vm);