Unit tests and implementation for $.Widget.prototype._bind, handling instance-scope for handlers, options.disabled and unbinding on destroy

Author: jzaefferer

tests/unit/widget/widget_core.js

@@ -529,4 +529,65 @@ test( "auto-destroy - .detach()", function() {
 	$( "#widget" ).testWidget().detach();
 });
 
+test("_bind to element (default)", function() {
+	expect(12);
+	var self;
+	$.widget("ui.testWidget", {
+		_create: function() {
+			self = this;
+			this._bind({
+				keyup: this.keyup,
+				keydown: this.keydown
+			});
+		},
+		keyup: function(event) {
+			equals( self, this );
+			equals( self.element[0], event.currentTarget );
+			equals( "keyup", event.type );
+		},
+		keydown: function(event) {
+			equals( self, this );
+			equals( self.element[0], event.currentTarget );
+			equals( "keydown", event.type );
+		}
+	});
+	var widget = $("<div></div>").testWidget().trigger("keyup").trigger("keydown");
+	widget.testWidget("disable").trigger("keyup").trigger("keydown");
+	widget.testWidget("enable").trigger("keyup").trigger("keydown");
+	widget.testWidget("destroy").trigger("keyup").trigger("keydown");
+});
+
+test("_bind to descendent", function() {
+	expect(12);
+	var self;
+	$.widget("ui.testWidget", {
+		_create: function() {
+			self = this;
+			this._bind(this.element.find("strong"), {
+				keyup: this.keyup,
+				keydown: this.keydown
+			});
+		},
+		keyup: function(event) {
+			equals( self, this );
+			equals( self.element.find("strong")[0], event.currentTarget );
+			equals( "keyup", event.type );
+		},
+		keydown: function(event) {
+			equals( self, this );
+			equals( self.element.find("strong")[0], event.currentTarget );
+			equals( "keydown", event.type );
+		}
+	});
+	// trigger events on both widget and descendent to ensure that only descendent receives them
+	var widget = $("<div><p><strong>hello</strong> world</p></div>").testWidget().trigger("keyup").trigger("keydown");
+	var descendent = widget.find("strong").trigger("keyup").trigger("keydown");
+	widget.testWidget("disable").trigger("keyup").trigger("keydown");
+	descendent.trigger("keyup").trigger("keydown");
+	widget.testWidget("enable").trigger("keyup").trigger("keydown");
+	descendent.trigger("keyup").trigger("keydown");
+	widget.testWidget("destroy").trigger("keyup").trigger("keydown");
+	descendent.trigger("keyup").trigger("keydown");
+});
+
 })( jQuery );

ui/jquery.ui.widget.js

@@ -156,6 +156,9 @@ $.Widget.prototype = {
 		this.element.bind( "remove." + this.widgetName, function() {
 			self.destroy();
 		});
+		
+		// used by _bind
+		this.bindings = $();
 
 		this._create();
 		this._trigger( "create" );
@@ -177,6 +180,8 @@ $.Widget.prototype = {
 			.removeClass(
 				this.widgetBaseClass + "-disabled " +
 				"ui-state-disabled" );
+		this.bindings
+			.unbind( "." + this.widgetName );
 	},
 
 	widget: function() {
@@ -231,6 +236,27 @@ $.Widget.prototype = {
 	disable: function() {
 		return this._setOption( "disabled", true );
 	},
+	
+	_bind: function( element, handlers ) {
+		// no element argument, shuffle and use this.element
+		if ( handlers == undefined ) {
+			handlers = element;
+			element = this.element;
+		// if binding to something else then this.element, store for unbinding on destroy
+		} else {
+			this.bindings = this.bindings.add( element );
+		}
+		var instance = this;
+		$.each( handlers, function(event, handler) {
+			element.bind( event + "." + instance.widgetName, function() {
+				if ( instance.options.disabled ) {
+					return;
+				}
+				return handler.apply( instance, arguments );
+			});
+			
+		});		
+	},
 
 	_trigger: function( type, event, data ) {
 		var callback = this.options[ type ];