> In fact, this looks like it just causes an increase in the amount of code 
> needed to bind the event handlers.

In my example yes, because it was a simplified scenario. Your method
most likely is more efficient with small codebase, but when I deal
with many components and events it does get ugly.

One of the thing that bugs me is that you can't continue to refer to
the widget as "this" within the callback function. So you have to
assign
"this" to a variable so it can be accessed from the callaback's scope.

Consider the following:

this.button = $('<input type="button" value="Go" />')
    .appendTo(this.wrapper)
    .bind('click', function(ev) {
        alert('There is'+ this.list.find('li').length +' objects in
the list');
    });

It won't work since this is referring the the callback's scope, not
the widget.
So you have to assign it before, like this:

var widget = this;
this.button = $('<input type="button" value="Go" />')
    .appendTo(this.wrapper)
    .bind('click', function(ev) {
        alert('There is'+ widget.list.find('li').length +' objects in
the list');
    });

Also, when working with many DOM elements it can get confusing to
assign them all to "this", mixing them with the widget's methods.

That's in part what makes it feel awkward to me, however I must agree
that for small plugins this method is probably not optimal.

regards

On Jan 13, 9:39 am, Scott González <[email protected]> wrote:
> I don't see how binding an event handler and passing in the widget
> instance is any cleaner than creating a closure and referencing the
> instance that you already have.  In fact, this looks like it just
> causes an increase in the amount of code needed to bind the event
> handlers.
>
> What's awkward or unpolished about the following code? Note that this
> would go in the _init method and would be the entirety of the plugin
>
> that you wrote:
>
> var widget = this;
>
> this.wrapper = $('<div class="ui-autocomplete-wrapper"></div>')
>     .insertAfter(this.element)
>     .bind('load', function(ev) {
>         $('<li>No search results</li>')
>             .appendTo(widget.list);
>     });
>
> this.list = $('<ul class="ui-autocomplete-list"></ul>')
>     .appendTo(this.wrapper);
>
> this.button = $('<input type="button" value="Go" />')
>     .appendTo(this.wrapper)
>     .bind('click', function(ev) {
>         alert('Congrats you clicked a button.');
>     });
>
> On Jan 12, 8:49 pm, h3 <[email protected]> wrote:
>
> > feedbacks on this would be appreciated:http://haineault.com/blog/86/
>
> > thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to 
[email protected]
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to