Widget defination in QuickStart

Oct 10, 2011 at 3:12 AM

Following the guard, I learned jQuery UI Widgets by rewirting the QuickStart project. I am confused that why the widget passes itself to a varible by using the expression "var that=this" in "_create" function. Besides, I found that the jQuery script didn't work when the infobox widget, tagger widget and start up script were definated in one file. Is it necessary to define them in seperate files and name the file using the widget's full name? 

Oct 11, 2011 at 7:37 PM


Based on my understanding of the DeliciousWidgetQuickStart, the expression "var that = this" stores a reference to the current value of 'this', which can be later accessed inside different scopes (such as a callback, which has its own scope, in which 'this' could have a different meaning).

As for placing the widgets in separate files, I believe you don't necessarily have to store them on separate files (although it sounds like a good practice to do so). The error you're experiencing might have something to do with the order in which the JavaScript scripts inside those files is loaded. In the web page, by default, the widgets' code is loaded before the startup script, and inverting the order will cause the widgets not to be shown (and will show an error like the following: $("body").infobox is not a function).

I hope you find this useful.

Guido Leandro Maliandi

Oct 13, 2011 at 5:50 PM
Edited Oct 13, 2011 at 5:50 PM

One more thing. Be sure when you combine these widgets into one file, be sure to place all of the widget declarations ($.widget ...) inside a single immediate function rather than just concatenating the contents of each file into a single one.

Hope this helps,