JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<button data-bind="click: syncData">Sync Data</button>
<div data-bind="kendoGrid: {
    data: people,
    widget: people.grid,
    sortable: true,
    editable: true,
    columns: [
       { field: 'first', title: 'First Name' },
       { field: 'last', title: 'Last Name' }
    ] }"></div>
  
<ul data-bind="foreach: people">
    <li data-bind="text: full"></li>
</ul>

JavaScript

var Person = function(data) {
   this.first = ko.observable();
   this.last = ko.observable();
   
   this.full = ko.computed(this.getFull, this);
   
   //initialize it the first time
   this.initialize(data);
};

ko.utils.extend(Person.prototype, {
    getFull: function() {
      return this.first() + ' ' + this.last();     
    },
    //can be called at anytime to initialize/update data
    initialize: function(data) {
      this.first(data.first);
      this.last(data.last);        
    }
});

var ViewModel = function() {
     this.people = ko.observableArray([
         new Person({ first: "Bob", last: "Smith" }),
         new Person({ first: "Doug", last: "Jones" }),
         new Person({ first: "Sally", last: "Green" })
     ]);
    
    //store a reference to the widget, so we can get at the modified data
    this.people.grid = ko.observable();
   
    //reconcile the grid data with the view model data
    this.syncData = function() {
       var people = this.people() || [],
           gridPeople = this.people.grid().dataSource.data() || [],
           person, gridPerson, i, length;
        
        //loop through the grid's people and update each vm person
        for (i = 0, length = gridPeople.length; i < length; i++) {
            gridPerson = gridPeople[i];
            person = people[i];
            
            //add a new person, if necessary
            if (!person) {
               people.push(new Person(gridPerson));   
            } else {
               person.initialize(gridPerson);   
            }
        }
    };
};


ko.applyBindings(new ViewModel());