Permalink
Browse files

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

…functionality, for further discussion.
  • Loading branch information...
jeresig committed Mar 5, 2010
0 parents commit 73168f499e80ddcc172cd1389e0be66cfd00b25a
Showing with 140 additions and 0 deletions.
  1. +15 −0 README.md
  2. +38 −0 demo.html
  3. +87 −0 jquery.tmpl.js
@@ -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 );
@@ -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>
@@ -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);

0 comments on commit 73168f4

Please sign in to comment.