Widget: Added ._bind() for easily binding events with correct context and disabled...

diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js
index 388e078b02f8d82c1803198407c6d81fb4b43279..f0afaa95605f5be87a689791347696eb13b55095 100644 (file)
--- 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 59c36283865bf22115216139a089f5f4fa458243..4d786e5c660365f06672a21dff818e7d8503a268 100644 (file)
--- 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 ];