Hi all,
I have Googled and can't find very much on using the $widget framework
except a couple of good articles on this blog (http://bililite.com/
blog/understanding-jquery-ui-widgets-a-tutorial/).
I am attempting to create a widget that can be instantiated on several
elements on a page at the same time. I was told that it was better to
use the $widget framework than to just build a plugin with state
management myself because it is supposed to help prevent memory leaks.
The problem seems to come when I have to refer back to the widget
based on events ("outside" of my baseclass code). I'm not sure how to
refer to the right instance. To give an example: I have a resize
method that I need to bind to the window resize event for my widget.
In my _init method I have something like this:
this.element.bind("myWidgetResize", $this.resize)
var $element = this.element;
$(window).resize(function() { $element.trigger('myWidgetResize'); } );
The problem is when my resize event is called, the element returned as
the target is always the last-created instance of the widget on the
page. So the other instances never get resized, even though the event
is called for each of them. It seems as if each time the _init method
is called on the baseclass it's wiping out all references to the
previous instances.
I am pulling the widget element and baseclass like so:
resize: function(event)
{
var widgetElement = $(event.target);
var $this = widgetElement.data("myWidget");
// ... do other stuff
}
I know that somehow the other instances' data is still there because
in some more direct scenarios I am able to get methods working with
the correct data by calling them externally. For instance another
binding in my _init:
var $this = this;
$(".somebutton", $list).live("click", function() { $this._getElement
(this).myWidget('doSomething', this); });
In the resize case, though, there's no element directly triggering it
that I can climb the DOM back up to get the widget parent.
So I am wondering... is there some way through the base class or
through $ui to get a list of the instances of my widget so I can pass
a key and pull the correct instance? Or is there some other way I can
change the context so that my resize event is working on the correct
instance? Any advice is MUCH appreciated.
Also if anyone has any other good tutorial links on how to use the
$widget framework, especially with binding to events, or sub elements
off the this.element, I would greatly appreciate it!
Thanks!
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
