Can't Backbone.js and jQuery-UI's custom Widget live in peace?
I am looking for a way to use both jQuery's custom widgets (for encapsulating my UI components along with internal states and custom events aimed for use on the outside DOM), and the wonderful "Backbone.js" framework in my project. One major problem I immediately stumbled upon is that if I bind event handlers to my Widget's root element (in order to control the Widget's INTERNAL behavior), and later set that same element as the root element for Backbone's View, Backbone automatically unbinds ALL pre-existing events (set by my Widget) and replaces them with event handlers specified at the View's "events" hash.
So, if I set the following event handlers in my 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("backgroundImag开发者_Go百科e", "").removeClass("selected"); });
And then instantiate my backbone.js view:
// "Participant"'s 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 make Backbone manage it's own handlers without affecting others?
This problem is solved in development version of backbone.js (current stable version 3.3 still contains this "bug"). You can use snapshot from https://github.com/documentcloud/backbone.
精彩评论