Knockoutjs.com - Better list example
http://knockoutjs.com/examples/betterList.html
HTML
<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<table>
<thead>
<tr name="header">
<th></th>
<th>First Name</th>
</tr>
</thead>
<tbody class="list" data-bind="foreach: apps">
<tr>
<td>
<input type="checkbox" data-bind="checked: selected" />
</td>
<td>
<input data-bind="value: name" />
</td>
</tr>
</tbody>
</table>
CSS
.unstyled {
list-style:none;
margin:0;
padding:0;
}
label {
cursor:pointer;
}
JavaScript
var viewModel = function () {
var self = this;
self.apps = [{
name: 'Freckle',
selected: false
}, {
name: 'Beanstalk',
selected: true
}, {
name: 'DropBox',
selected: false
}, {
name: 'Postmark',
selected: false
}];
}
var vm = new viewModel();
ko.applyBindings(vm);