Knockout.Extensions DataBinding Sample 2
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<body>
<table>
<tr>
<td colspan="2" valign="top">
<table id="poTable" class="es-grid" cellspacing="0">
<tbody data-bind="foreach: data()">
<tr data-bind="foreach: $parent.columns()">
<td data-bind="text: $parent[$data.propertyName]">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br />
<button onclick="fakeSort(viewModel.data)">Fake Sort</button>
</body>
JavaScript
function fakeSort(data) {
data = data.reverse();
}
var viewModel = {
data: ko.observableArray([
{
"EmployeeID": 1,
"FirstName": "Fred",
"LastName": "Smith",
"Age": 42,
"RowState": 2},
{
"EmployeeID": 2,
"FirstName": "Joe",
"LastName": "Smith",
"Age": 39,
"RowState": 2},
{
"EmployeeID": 3,
"FirstName": "Mike",
"LastName": "Griffin",
"Age": 26,
"RowState": 2},
{
"EmployeeID": 4,
"FirstName": "Sally",
"LastName": "BoJangles",
"Age": 42,
"RowState": 2},
{
"EmployeeID": 5,
"FirstName": "Sam",
"LastName": "Rollins",
"Age": 39,
"RowState": 2},
{
"EmployeeID": 6,
"FirstName": "Mike",
"LastName": "Smith",
"Age": 26,
"RowState": 2},
{
"EmployeeID": 7,
"FirstName": "Max",
"LastName": "BoJangles",
"Age": 42,
"RowState": 2},
{
"EmployeeID": 8,
"FirstName": "Joe",
"LastName": "Smith",
"Age": 39,
"RowState": 2},
{
"EmployeeID": 9,
"FirstName": "Mike",
"LastName": "Smith",
"Age": 26,
"RowState": 2},
{
"EmployeeID": 10,
"FirstName": "Fred",
"LastName": "Smith",
"Age": 42,
"RowState": 2},
{
"EmployeeID": 11,
"FirstName": "Fred",
"LastName": "Smith",
"Age": 42,
"RowState": 2},
{
"EmployeeID": 12,
"FirstName": "Joe",
"LastName": "Smith",
"Age": 39,
"RowState": 2},
{
"EmployeeID": 13,
"FirstName": "Pamela",
"LastName": "Williams",
"Age": 26,
"RowState": 2},
{
"EmployeeID": 14,
"FirstName": "Sally",
"LastName": "Smith",
"Age": 42,
"RowState": 2},
{
...