Just got into jQuery and I am trying to write a wrapper for some existing templating code. I would like to follow best practices from the beginning, so this future jQuery plugins I write aren't a pile of poo.

I have been trying to follow some of the online tutorials, but none I've found seem to cover exactly what I want to do; probably more a reflection on my Googling abilities than anything.... :o)

Anyway, the base templating code has tow main functions; you call a template creation function on an element on page load that stores that element as a template and removes it from the DOM. Then, later, you call a populate function that fills the template with data and re-inserts it into the DOM. This is obviously used mainly with AJAX requests.

The plugin wrapper I have come up with (which works) is as follows:

1. (function($) 
2. { 
3.   $.fn.hTemplate = function(props) 
4. {
5. var $this = this;
7. // For each selected element, if the template has not already been created, create it
8. $this.each(function(index) 
9. {
10. if(!this.__hTemplate)
11. this.__hTemplate = new HTemplates.Template(this);
12. });
14. // The populate function; for each element, populate the template if it exists
15. this.populate = function(data) 
16. {
17. // 
18. $this.each(function(index) 
19. {
20. if(this.__hTemplate)
21. this.__hTemplate.populate(data)
22. });
23.  
24. // Return jQuery object for chaining
25. return $this; 
26. };
28. // Return jQuery object for chaining
29. return $this; 
30. };
32.  })(jQuery);