Landing a first pass at a demonstration of the new jQuery templating …

…functionality, for further discussion.

README.md

@@ -0,0 +1,15 @@
+A jQuery templating plugin - created for demonstration purposes.
+
+    $("#sometmpl")
+	    .render( dataObject ) // Returns a LI with all the data filled in
+	    .appendTo("ul");
+
+    $("#sometmpl")
+	    .render( arrayOfDataObjects ) // Returns two LIs with data filled in
+	    .appendTo("ul");
+
+    // Appends one LI, filled with data, into the UL
+    $("ul").append( tmpl, dataObject );
+
+    // Appends two LIs, filled with data, into the UL
+    $("ul").append( tmpl, arrayOfDataObjects );

demo.html

@@ -0,0 +1,38 @@
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="jquery.tmpl.js"></script>
+<script>
+jQuery(function(){
+	var dataObject = {
+        	name: "John Resig",
+        	url: "http://ejohn.org/",
+        	cities: [
+                	"Boston, MA",
+                	"San Francisco, CA"
+        	]
+	};
+
+	var arrayOfDataObjects = [ dataObject, dataObject ];
+
+	var tmpl = '<li><a href="<%= url %>"><%= name %></a> (<%= cities.join(", ") %>)</li>';
+
+
+	$("#sometmpl")
+        	.render( dataObject ) // Returns a LI with all the data filled in
+        	.appendTo("ul");
+
+	$("#sometmpl")
+        	.render( arrayOfDataObjects ) // Returns two LIs with data filled in
+        	.appendTo("ul");
+
+	// Appends one LI, filled with data, into the UL
+	$("ul").append( tmpl, dataObject );
+
+});
+</script>
+
+<script id="sometmpl" type="text/html">
+        <li><a href="<%= url %>"><%= name %></a>
+                (<%= cities.join(", ") %>)</li>
+</script>
+
+<ul></ul>

jquery.tmpl.js

@@ -0,0 +1,87 @@
+/*
+ * jQuery Templating Plugin
+ *   NOTE: Created for demonstration purposes.
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ */
+(function(jQuery){
+	// Override the DOM manipulation function
+	var oldManip = jQuery.fn.domManip;
+
+	jQuery.fn.extend({
+		render: function( data ) {
+			if ( !jQuery.isArray(data) ) {
+				data = [ data ];
+			}
+
+			return this.map(function(i, tmpl){
+				return jQuery.map( data, function( data ){
+					return jQuery.render( tmpl, data );
+				});
+			});
+		},
+
+		// This will allow us to do: .append( "template", dataObject )
+		domManip: function( args ) {
+			if ( args.length === 2 && typeof args[1] !== "string" ) {
+				arguments[0] = [ jQuery.render( args[0], args[1] ) ];
+			}
+
+			return oldManip.apply( this, arguments );
+		}
+	});
+
+	jQuery.extend({
+		render: function( tmpl, data ) {
+			var fn;
+
+			// Use a pre-defined template, if available
+			if ( jQuery.templates[ tmpl ] ) {
+				fn = jQuery.templates[ tmpl ];
+
+			// We're pulling from a script node
+			} else if ( tmpl.nodeType ) {
+				var node = tmpl, elemData = jQuery.data( node );
+				fn = elemData.tmpl || jQuery.tmpl( node.innerHTML );
+			}
+
+			// We assume that if the template string is being passed directly
+			// in the user doesn't want it cached. They can stick it in
+			// jQuery.templates to cache it.
+			return (fn || jQuery.tmpl( tmpl ))( jQuery, data );
+		},
+
+		// You can stick pre-built template functions here
+		templates: {},
+
+		/*
+		 * For example, someone could do:
+		 *   jQuery.templates.foo = jQuery.tmpl("some long templating string");
+		 *   $("#test").append("foo", data);
+		 */
+
+		tmpl: function tmpl(str, data) {
+			// Generate a reusable function that will serve as a template
+			// generator (and which will be cached).
+			var fn = new Function("jQuery","obj",
+				"var p=[],print=function(){p.push.apply(p,arguments);};" +
+
+				// Introduce the data as local variables using with(){}
+				"with(jQuery){with(obj){p.push('" +
+
+				// Convert the template into pure JavaScript
+				str.replace(/[\r\t\n]/g, " ")
+					.replace(/'(?=[^%]*%>)/g,"\t")
+					.split("'").join("\\'")
+					.split("\t").join("'")
+					.replace(/<%=(.+?)%>/g, "',$1,'")
+					.split("<%").join("');")
+					.split("%>").join("p.push('")
+
+				+ "');}}return p.join('');");
+
+			// Provide some basic currying to the user
+			return data ? fn( jQuery, data ) : fn;
+		}
+	});
+})(jQuery);