Knockout JQgrid binding

Knockout JQgrid binding

HTML

<script src="http://dl.dropbox.com/u/16870890/jsgrid/json2.min.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/knockout.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/grid.locale-en.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/jquery.jqGrid.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/ko.gridBinding.js"></script>
<h2>Knockout JQgrid binding</h2>

<div id="pager"></div>
<table id="workflow" data-bind="grid: { data: items, selectedItem: editModel }">
    <caption>Ticket Workflow Transitions</caption>
    <thead> 
        <tr> 
            <th data-field="application">Application</th> 
            <th data-field="currentStatus">Current Status</th> 
            <th data-field="nextStatus">Next Status</th> 
        </tr> 
    </thead> 
</table>
<button type="submit" data-bind='click: addItem'>Add item</button>

JavaScript

$(function () {
    var viewModel = {
        items: ko.observableArray([]),
        editModel: ko.observable(),
        addItem: function () {
        		alert('test');
            this.items.push({ application: '1', currentStatus: '2', nextStatus: '3'});
        }
    };

    viewModel.addItem();
    viewModel.addItem();
  
    ko.applyBindings(viewModel);
});