Kendo UI - kendo.Backbone.DataSource

Creating an adapter to use a Backbone.Collection as the backing store for a kendo.data.DataSource

by ibike365

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="example" class="k-content">
    <div id="grid"></div>
</div>

CSS

thead {
    border-bottom: 1px solid #ccc;
}

th {
    padding: 5px;
    font-weight: bold;
}

td {
    padding: 5px;
}

fieldset {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
}

fieldset legend {
    padding: 3px 10px;
}

JavaScript

// Kendo UI: kendo.backbone.DataSource
// -----------------------------------
// Copyright (C) 2013 Telerik. All Rights Reserved.
// http://kendoui.com
//
// An early work to create a adapter that wraps around a 
// `Backbone.Collection` as the underlying data store and
// transport for a `kendo.data.DataSource`. This will provide basic
// data-binding functionality for Kendo UI widgets and controls, such
// as grids, list views, etc.
//
// Note that this is a largely untested experiment and hack. It is not 
// intended for production use. It is intended to be a sample only, 
// and is presented as-is with no implied stability and no guarantee 
// to work properly with any of Kendo UI's control suite.

(function($, kendo, _) {
  "use strict";

  // add a backbone namespace if we need it
  kendo.Backbone = kendo.Backbone || {};

  // BackboneTransport
  // -----------------
  //
  // Define a transport that will move data between
  // the kendo DataSource and the Backbone Collection
  var BackboneTransport = function(collection){
    this._collection = collection;
  };
  
  // add basic CRUD operations to the transport
  _.extend(BackboneTransport.prototype, {

    create: function(options) {
      // increment the id
      if (!this._currentId) { this._currentId = this._collection.length; }
      this._currentId += 1;

      // set the id on the data provided
      var data = options.data;
      data.id = this._currentId;

      // create the model in the collection
      this._collection.add(data);

      // tell the DataSource we're done
      options.success(data);
    },

    read: function(options) {
      options.success(this._collection.toJSON());
    },

    update: function(options) {
      // find the model
      var model = this._collection.get(options.data.id);

      // update the model
      model.set(options.data);

      // tell the DataSource we're done
      options.success(options.data);
    },

    destroy: function(options) {
      // find...