I have spent the better part of 3 days trying to resolve an IE only memory leak in a custom ui widget. It involves cloning an image and removing the original.
When researching this I went back to the jquery ui website to look at modals to see if they had a similar problem. On the modals example page... if I open one modal then switch to another modal... then repeat.... I see the memory usage in task manager steadily increasing.
So a couple questions:
1) Am i seeing a memory leak in the modal or is the example not "cleaning things up" like you would in a real app
2) If that is a memory leak, should I be worried?
3) Are there any best practices with jquery ui for avoiding leaks, especially when it comes to cloning/inserting/removing content
When developing jQuery UI widgets how should one store arbritray data? I'm unclear on when I should use data or when I should just use a var declared in my _create. So if I am just storing values to use later which should I use?
For example what is the difference between using these in a _create function:
1
this.myVar = "foo"
2
e = this.element
e.data("myVar", "foo");
As I understand it 1 stores the data within the widget, and 2 is on the DOM element. But is there any actual difference in usage, when would I use one and not the other.
I recently created a set of widgets that "use" some of the default jQuery UI widgets but the method I use is wrapping. I would like your feedback on this approach and it's pros and cons.
My example - I have a page selector widget that uses sortable for ordering:
Rather than extend the sortable widget I wrote my code so that sortable was invoked from within my widget.
So in my _create I have something like like this:
var self = this, o = this.options, e = this.element;
e.sortable(o);
And the sortable options are set in my widgets options{}.
I'm a little hazy on best practices for extending/wrapping and when to use them. This is one area where I can not find any (good) blog posts or documentation for direction
I have just started developing custom UI widgets and am noodling with the best method for handling interaction between them.
Right now I am thinking about using bind & trigger with custom events.
Each widget would be set up to "listen" and/or "speak" custom events. I like this approach because the widgets are loosely coupled but I am not sure if this is the best way.
I published a quick blog post detailing the above with a code example: