Binding Kendo UI Widgets In A Backbone.View

It's not terribly difficult to get a Kendo UI control in to a Backbone.View. I've written about this before , and I do it a lot. Sure, there are a few little things you need to know about - like when to initialize the control - but for the most part, getting the widgets in place is easy.

Once you have the Kendo UI Widgets in place, though, things get to be a little more ... interesting. If you want to respond to standard DOM events within a Backbone.View, you can just use the events configuration. But if you want to handle events that comes from the Kendo UI widgets directly, you would be in for writing some extra code in your view to manually wire this up.

Until now.

kendo.Backbone.ViewEvents

With the v0.0.6 release of the Kendo UI Backbone integration project, you can now declare a kendoUIEvents object in your Backbone.View, the same way you would declare the DOM events. Once you have that in place, and the Kendo UI widgets have been initialized, make a call to kendo.Backbone.ViewEvents.delegate and you're good to go.

var View = Backbone.View.extend({
  template: "<div id='list'></div>",

  // declare the Kendo UI widget events
  // the same way you would declare the
  // Backbone.View "events"
  kendoUIEvents: {
    "change #list": "listChanged"
  },

  listChanged: function(e){
    console.log("THE LIST CHANGE EVENT FIRED!!!");
  },

  render: function(){
    // render the view however you want
    this.$el.html(this.template);

    // instantiate a Kendo UI widget in the view
    this.$("#list").kendoListView({
      dataSource: {
        data: [{name: "foo"}, {name: "bar"}]
      },
      template: "#= name #"
    });

    // tell the kendo.Backbone plugin to 
    // delegate the view events for 
    // the widgets in this view
    kendo.Backbone.ViewEvents.delegate(this);
  },

  remove: function(){
    // unbind the kendo ui events
    kendo.Backbone.ViewEvents.undelegate(this);
    Backbone.View.prototype.remove.call(this);
  }
});

You now have the Kendo UI widget handled with a callback method in your Backbone.View instance!

Unbinding On Remove / Close

In addition to binding the events, you will also need to unbind the events when the view instance is closed or removed from the DOM. Notice the override of the remove method in the above example? It handles this quite easily by calling the undelegate method on the kendo.Backbone.ViewEvents object.

  remove: function(){
    // unbind the kendo ui events
    kendo.Backbone.ViewEvents.undelegate(this);

    Backbone.View.prototype.remove.call(this);
  }

Get The Kendo UI Backbone Project

You can read more about this feature in the documentation for the ViewEvents, and grab the latest version of the code from the github repository.

Be sure to check out the rest of the Kendo UI Labs, located at Labs.KendoUI.com, as well.