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.js

@@ -146,12 +146,18 @@ test('merge multiple option arguments', function() {
 	});
 });
 
+function teardownWidget(name) {
+	delete $.fn[name];
+	delete $.ui[name];
+}
+
 test(".widget() - base", function() {
 	$.widget("ui.testWidget", {
 		_create: function() {}
 	});
 	var div = $("<div></div>").testWidget()
 	same(div[0], div.testWidget("widget")[0]);
+	teardownWidget("testWidget");
 });
 
 test(".widget() - overriden", function() {
@@ -163,6 +169,72 @@ test(".widget() - overriden", function() {
 		}
 	});
 	same(wrapper[0], $("<div></div>").testWidget().testWidget("widget")[0]);
+	teardownWidget("testWidget");
+});
+
+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");
+	teardownWidget("testWidget");
 });
 
+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");
+	teardownWidget("testWidget");
+});
+
+// test destroy and disabled
+
 })(jQuery);

ui/jquery.ui.widget.js

@@ -139,6 +139,9 @@ $.Widget.prototype = {
 		this.element.bind( "remove." + this.widgetName, function() {
 			self.destroy();
 		});
+		
+		// used by _bind
+		this.bindings = $();
 
 		this._create();
 		this._init();
@@ -156,6 +159,8 @@ $.Widget.prototype = {
 			.removeClass(
 				this.widgetBaseClass + "-disabled " +
 				this.namespace + "-state-disabled" );
+		this.bindings
+			.unbind( "." + this.widgetName );
 	},
 
 	widget: function() {
@@ -206,30 +211,25 @@ $.Widget.prototype = {
 		return this._setOption( "disabled", true );
 	},
 
-	_bind: function() {
-		// TODO figure out which element to bind to: this.element, if none specified
-		// TODO append widget namespace to all event names
-		// TODO set the scope of the callback to the instance (this here)
-		// TODO extend destroy to unbind all events to elements other then this.element
-		
-		// usage: bind to this.element
-		this._bind({
-			mouseover: function(event) {
-				this.show(event.currentTarget)
-			},
-			mouseout: function(event) {
-				this.hide(event.currentTarget);
-			}
-		});
-		// usage: bind to a specified element
-		this._bind(this.element.find(".headers"), {
-			mouseover: function(event) {
-				this.show(event.currentTarget)
-			},
-			mouseout: function(event) {
-				this.hide(event.currentTarget);
-			}
-		});
+	_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 ) {