Knockout with jQuery UI Grid Bindings

by craigcav

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/grid.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">
<link rel="stylesheet" href="http://brado23.github.com/jquery-ui/grid-datamodel2/grid.css">
<script src="http://knockoutjs.com/spec/lib/knockout-latest.js"></script>
<script src="https://gist.github.com/raw/908284/8eea5b634a84f975688b5aa18159540a8c02a9c9/ko.gridBindingSpike.js"></script>
<h2>Knockout with jQuery UI Grid Bindings</h2>

<table id="developers" data-bind="grid: { data: developers, 
                                          columns: ['firstName', 'lastName', 'country'], 
                                          selectMode: 'single', 
                                          selectedItem: selectedDeveloper }"> 
    <thead> 
        <tr> 
            <th data-field="firstName">First Name</th> 
            <th data-field="lastName">Last Name</th> 
            <th data-field="country">Country</th> 
        </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</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"...

JavaScript

$(function() {
        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);
    });