Skip to content
Permalink
Browse files

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

… and disabled checking. Pretty much a direct copy from the previous bind branch.
  • Loading branch information...
scottgonzalez committed Jan 18, 2011
1 parent 67b070f commit 659db70caa2ff1e3a43e98f3895f0353ebcee154
Showing with 115 additions and 0 deletions.
  1. +93 −0 tests/unit/widget/widget_core.js
  2. +22 −0 ui/jquery.ui.widget.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 = [];
@@ -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 ];

2 comments on commit 659db70

@jzaefferer

This comment has been minimized.

Copy link
Member

replied Jan 18, 2011

At some point we should remove those old bind branches...

Whats the deal with this new branch?

@scottgonzalez

This comment has been minimized.

Copy link
Member Author

replied Jan 18, 2011

I was having trouble getting bind2 to a reasonable state, so I started a new branch. I deleted the old bind branches as soon as I created this one. I wanted to play around with some other ideas. For example, this._bind({ click: "clickHandler" }) to bind to this.clickHandler but wait until the click to figure out what function we're executing. This allows us to bind to a function while still allowing the function to be proxied later, which is an important feature that "just works" when you have to manually store a reference to this and wrap your handler in an anonymous function.

I also want to test out implementing ._hoverable( elem ) and ._focusable( elem ) on top of ._bind() to remove a lot of the duplicated code across our widgets.

Please sign in to comment.
You can’t perform that action at this time.