<h2>People</h2>
<table>
<thead>
<tr><th>Index</th><th>Name</th><th></th></tr>
</thead>
<tbody data-bind="foreach: people">
<td data-bind="text: $index"></td> <!-- Look, here we use $index -->
<td data-bind="text: name"></td>
<td><a href="#" data-bind="click: $parent.removePerson">Remove</a></td>
</tbody>
</table>
<button data-bind="click: addPerson">Add</button>
<p><em>Note: Switch to the "HTML" or "JavaScript" tab to see the code</em></p>
function AppViewModel() {
var self = this;
self.people = ko.observableArray([
{ name: 'Bert' },
{ name: 'Charles' },
{ name: 'Denise' }
]);
self.addPerson = function() {
self.people.push({ name: "New at " + new Date().getSeconds() });
};
self.removePerson = function(person) {
self.people.remove(person);
}
}
ko.applyBindings(new AppViewModel());