Knockout with jqGrid Bindings

HTML

<script src="http://brado23.github.com/jquery-ui/jquery-1.4.4.js"></script>
<script src="http://brado23.github.com/jquery-ui/grid-datamodel2/jquery.tmpl.js"></script>
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.core.js"></script>
<script src="http://brado23.github.com/jquery-ui/grid-datamodel2/jquery.tmplPlus.js"></script>
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.widget.js"></script>
<script src="http://brado23.github.com/jquery-ui/grid-datamodel2/jquery.datalink2.js"></script>
<script src="http://brado23.github.com/jquery-ui/grid-datamodel2/jquery.datasource.js"></script>
<script src="http://brado23.github.com/jquery-ui/grid-datamodel2/jquery.pager.js"></script>
<link rel="stylesheet" href="http://brado23.github.com/jquery-ui/themes/base/jquery.ui.all.css">
<script src="http://knockoutjs.com/spec/lib/knockout-latest.js"></script>
<script src="http://dl.dropbox.com/u/16870890/tabletogrid.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/16870890/ui.jqgrid.css">
<script src="http://dl.dropbox.com/u/16870890/ko.gridBindingSpike.js"></script>
<h2>Knockout with jqGrid Bindings</h2>

<table id="developers" data-bind="grid: { data: developers }"> 
    <thead> 
        <tr> 
            <th data-field="firstName">First Name</th> 
            <th data-field="lastName">Last Name</th> 
            <th data-field="country">Country</th> 
        </tr> 
    </thead> 
</table> 

<p>
    <input data-bind="click: addDeveloper" type="button" value="Add developer with name"/>
    <input data-bind="value: newDeveloperName" />
</p> 
<p>
    <input data-bind="click: deleteDeveloper" 
            type="button" 
            value="Delete selected developer" />
</p>

JavaScript

var viewModel = {
    developers: ko.observableArray([
        {
        firstName: "Scott",
        lastName: "González",
        country: "USA",
        twitter: "scott_gonzalez",
        github: "scottgonzalez"},
    {
        firstName: "Jörn",
        lastName: "Zaefferer",
        country: "Germany",
        twitter: "bassistance",
        github: "jzaefferer"},
    {
        firstName: "Brad",
        lastName: "Olenick",
        country: "USA",
        twitter: "",
        github: "brado23"},
    {
        firstName: "Richard",
        lastName: "Worth",
        country: "USA",
        twitter: "rworth",
        github: "rdworth"},
    {
        firstName: "Boris",
        lastName: "Moore",
        country: "USA",
        twitter: "borismoore",
        github: "BorisMoore"}
    ]),
    selectedDeveloper: ko.observable(),
    newDeveloperName: ko.observable("Fred"),
    addDeveloper: function() {
        this.developers.push({
            firstName: this.newDeveloperName()
        });
    },
    deleteDeveloper: function() {
        this.developers.remove(this.selectedDeveloper());
    }
};
ko.applyBindings(viewModel);