Object Oriented Event Handling and Widgets ...

Paul Chiu, author of Passbook, has written up his thoughts on reuse for widgets in large Ajax applications.

The solution?

    For Passbook I decided to solve this problem once and for all. The solution I believe is in objectifying page elements as a block so that a panel with an edit and delete button can be duplicated quickly without having the Javascript code keep track of which panel on the page was clicked and trying to modify that page element. An object oriented approach would mean the page object could edit or delete it self because it knows what it is and what it represents.

    While there are some existing solutions that use custom methods to streamline the object oriented process and work around Javascript is event target scoping of "this". I believe a better method existed that did not require so much prototype modification and was more self contained and flexible. My solution is to use jQuery is plugin model to control on page elements, or widgets.

    To see the basic pattern it is easiest to first checkout the functional demo. The demo contains two main elements: a widgets container where an add action exists, and a widget controller that offers the user the ability to submit it or remove it. The demo shows the widget manipulating it self, its parent, as well as using a basic ajax callback within it self.

Paul then walks through an example, that ends up with the following code.
PLAIN TEXT
JAVASCRIPT:

   1. 
   2.// Widget container
   3.(function($) {
   4.// Widget container plugin
   5.$.fn.widgetContainer = function() {
   6.this.each(function() {
   7.  // Vars
   8.var wc = $(this);
   9. 
  10. // Set events
  11.wc.find(#add).click(function(e) { if (e) e.preventDefault(); add(wc) });
  12. });
  13. }
  14. 
  15.// Add a widget to the container
  16.function add(wc) {
  17.var widget = $($.fn.widget.template);
  18.widget
  19..appendTo(wc)
  20..fadeIn( islow)
  21. .widget(wc);
  22. }
  23.
  24.// Widget
  25.(function() {
  26.// Widget plugin
  27.$.fn.widget = function(container) {
  28. this.each(function() {
  29.// Vars
  30. var w = $(this);
  31.  w.parent = container;
  32.
  33.   // Set events
  34. w.find(form).submit(function(e) { if (e) e.preventDefault(); submit(w) });
  35. w.find(.remove).click(function(e) { if (e) e.preventDefault(); remove(w) });
  36. });
  37.  }
  38.  $.fn.widget.template = <div class="widget"><form action="" method="POST"><input type="text" value=""/><input type="submit" value="Action!"/><a href="#" class="remove">Remove</a></form></div>;
  39. 
  40. // Remove widget
  41. function remove(w) {
  42. w.remove();
  43.}
  44.
  45. // Submit widget data
  46. function submit(w) {
  47.  w.css(ackground, ared);
  48.  $.post(/, w.find(form).serialize(), function(data) {
  49. w.find(:text).val((new Date()).toString());
  50. w.parent.fadeOut();
  51.setTimeout(function() { w.parent.fadeIn() }, 500);
  52. });
  53.}
  54. })();
  55. })(jQuery);
  56.
  57.// Main
  58.$(function() {
  59. $(.widgetContainer).widgetContainer();
  60. });
  61. 

 Original Source:
http://ajaxian.com/archives/object-oriented-event-handling-and-widgets