Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

…functionality, for further discussion.
  • Loading branch information...
commit 73168f499e80ddcc172cd1389e0be66cfd00b25a 0 parents
@jeresig jeresig authored
Showing with 140 additions and 0 deletions.
  1. +15 −0 README.md
  2. +38 −0 demo.html
  3. +87 −0 jquery.tmpl.js
15 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 );
38 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>
87 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);
Please sign in to comment.
Something went wrong with that request. Please try again.