Widget: Added ._bind() for easily binding events with correct context and disabled checking. Pretty much a direct copy from the previous bind branch.

2 files changed, 115 insertions, 0 deletions

diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js
index 388e078b0..f0afaa956 100644
--- a/tests/unit/widget/widget_core.js
+++ b/tests/unit/widget/widget_core.js
@@ -404,6 +404,99 @@ test( ".widget() - overriden", function() {
 	same( wrapper[0], $( "<div></div>" ).testWidget().testWidget( "widget" )[0] );
 });
 
+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" );
+});
+
 test( "._trigger() - no event, no ui", function() {
 	expect( 7 );
 	var handlers = [];
diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js
index 59c362838..4d786e5c6 100644
--- a/ui/jquery.ui.widget.js
+++ b/ui/jquery.ui.widget.js
@@ -129,6 +129,8 @@ $.Widget.prototype = {
 			this._getCreateOptions(),
 			options );
 
+		this.bindings = $();
+
 		var self = this;
 		this.element.bind( "remove." + this.widgetName, function() {
 			self.destroy();
@@ -162,6 +164,7 @@ $.Widget.prototype = {
 			.removeClass(
 				this.widgetBaseClass + "-disabled " +
 				"ui-state-disabled" );
+		this.bindings.unbind( "." + this.widgetName );
 	},
 	_destroy: $.noop,
 
@@ -216,6 +219,25 @@ $.Widget.prototype = {
 		return this._setOption( "disabled", true );
 	},
 
+	_bind: function( element, handlers ) {
+		// no element argument, shuffle and use this.element
+		if ( !handlers ) {
+			handlers = element;
+			element = this.element;
+		} 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 ];