Can Backbone.js and jQuery-UI custom widgets live alone?

Question

I am looking for a way to use both jQuery custom widgets (to encapsulate the components of my interface, internal states and user events intended for use on an external DOM), and the wonderful "Backbone.js" structure in my project. One of the main problems that I immediately stumbled upon is that if I bind event handlers to my Widget root element (to control the Widget INTERNAL behavior) and later set the same element as the root element for Backbone View, Backbone automatically unties ALL previous events (set by my widgets) and replaces them with event handlers specified in the "Events" hash.

So, if I install the following event handlers in the widget declaration:

var el = this.element; el.bind("mouseenter", function (e) { el.css("backgroundImage", "url(over.png)").addClass("selected"); }).bind("mouseleave", function (e) { el.css("backgroundImage", "").removeClass("selected"); }); 

And then create an instance of my backbone.js:

 // "Participant" render() creates a DIV and initializes my widget on it var userView = new this.Views.Participant({ model: user }); $("#somediv").append(userView.render().el); 

My mouse event handlers stop responding! Is there a way to get Backbone to manage its own handlers without affecting others?

Answer 1

This problem was resolved in the development version of backbone.js (the current stable version 3.3 still contains this "error"). You can use a snapshot from https://github.com/documentcloud/backbone .