Skip to content

Commit

Permalink
Completed work on $.templates API for caching/storing templates by name.
Browse files Browse the repository at this point in the history 
Updated some samples to use this API.

Made a few small bug fixes.

Moved 'tmplTags' from the $ namespace to the $.tmpl namespace as $.tmpl.tags
  • Loading branch information
@BorisMoore
BorisMoore committed Jul 8, 2010
1 parent 2214b0a commit 8fc69f4
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 31 deletions.
15 changes: 14 additions & 1 deletion README.md
View file
Expand Up @@ -2,24 +2,28 @@ A jQuery templating plugin - created for demonstration purposes.
____________________________________________________________________

// Render one LI, filled with data, then append it into the UL

$.tmpl( "<li>${firstName}</li>", dataObject )
.appendTo( "ul" );
____________________________________________________________________

<!-- Declare a template as a script block of type "text/html" -->

<script id="sometmpl" type="text/html">
<li>${firstName}</li>
</script>
____________________________________________________________________

// Render the declared template as one LI appended to the target UL

$( "#sometmpl" )
.tmpl( dataObject )
.appendTo( "ul" );
____________________________________________________________________

// Render the declared template as multiple LIs appended to the target UL
// Provide a click event accessing the data

$( "#sometmpl" )
.tmpl( arrayOfDataObjects )
.appendTo( "ul" )
Expand All @@ -28,5 +32,14 @@ ____________________________________________________________________
});
____________________________________________________________________

// Store a string as a compiled template for later use
$.templates( "myTmpl", "<span>${firstName}</span>" );

// Render stored template and insert after target.
$.tmpl( "myTmpl", dataObject )
.insertAfter( "#target" );

____________________________________________________________________

A demo page using this plugin can be found here:
http://infinity88.com/jquery-tmpl/movies/movies.htm
http://infinity88.com/jquery-tmpl/movies/movies.htm
2 changes: 1 addition & 1 deletion demos/movies/PagesCore/movies.html
View file
Expand Up @@ -293,7 +293,7 @@ <h1>Netflix: Book a Movie...</h1>
return;
}
var ctx = bookingCtxs[booking.movie.Id],
tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl();
tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).templates();
if ( ctx.tmpl !== tmpl) {
ctx.tmpl = tmpl;
updateContext( ctx );
Expand Down
2 changes: 1 addition & 1 deletion demos/movies/PagesTmplPlus/movies1.html
View file
Expand Up @@ -293,7 +293,7 @@ <h1>Netflix: Book a Movie...</h1>
return;
}
var ctx = bookingCtx( booking ),
tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl();
tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).templates();
if ( ctx.tmpl !== tmpl) {
ctx.tmpl = tmpl;
$.tmplCmd( "update", ctx );
Expand Down
2 changes: 1 addition & 1 deletion demos/movies/PagesTmplPlus/movies2.html
View file
Expand Up @@ -249,7 +249,7 @@ <h1>Netflix: Book a Movie...</h1>
var ctx = bookingCtx( booking ),
rendered = edit ? onBookingEditRendered : onBookingRendered;
if ( ctx.rendered !== rendered) {
ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl();
ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).templates();
ctx.rendered = rendered;
$.tmplCmd( "update", ctx );
}
Expand Down
2 changes: 1 addition & 1 deletion demos/movies/PagesTmplPlus/movies3.html
View file
Expand Up @@ -242,7 +242,7 @@ <h1>Netflix: Book a Movie...</h1>
var ctx = bookingCtx( booking ),
rendered = edit ? onBookingEditRendered : onBookingRendered;
if ( ctx.rendered !== rendered) {
ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl();
ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).templates();
ctx.rendered = rendered;
$.tmplCmd( "update", ctx );
}
Expand Down
2 changes: 1 addition & 1 deletion demos/samplesCore/composition.html
View file
Expand Up @@ -53,7 +53,7 @@
}

function getTemplate( key ) {
return $( "#tmpl" + key ).tmpl();
return $( "#tmpl" + key ).templates();
}

$(function(){
Expand Down
2 changes: 1 addition & 1 deletion demos/samplesTmplPlus/composition.html
View file
Expand Up @@ -54,7 +54,7 @@
}

function getTemplate( key ) {
return $( "#tmpl" + key ).tmpl();
return $( "#tmpl" + key ).templates();
}

$(function(){
Expand Down
45 changes: 21 additions & 24 deletions jquery.tmpl.js
View file
Expand Up @@ -4,8 +4,7 @@
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function(jQuery){
// Override the DOM manipulation function
(function( jQuery, undefined ){
var oldManip = jQuery.fn.domManip, tCtxAtt = "_tmplctx", itm, ob,
newCtxs = {}, appendToCtxs, topCtx = { key: 0 }, ctxKey = 0, cloneIndex = 0;

Expand Down Expand Up @@ -75,11 +74,9 @@
jQuery.fn.extend({
tmpl: function( data, options, parentCtx ) {
if ( arguments.length ) {
// Use wrapped elements as template markup.
// Use first wrapped element as template markup.
// Return wrapped set of fragments obtained by evaluating template against data.
return this.map( function( i, tmpl ){
return jQuery.tmpl( tmpl, data, options, parentCtx || topCtx, true );
});
return jQuery.tmpl( this[0], data, options, parentCtx, true );
}
// If no arguments, used to get template context of first wrapped DOM element,
// or, if it is a template script block, the compiled template
Expand Down Expand Up @@ -120,6 +117,9 @@
jQuery.extend({
tmpl: function( tmpl, data, options, parentCtx, domFrag ) {
var fn, targetCtx, coll, ret, wrapped;
if ( data === undefined ) {
data = {};
}
if ( parentCtx && !tmpl && !data && !options ) {
// Re-evaluate rendered template for the parentCtx
targetCtx = parentCtx;
Expand Down Expand Up @@ -163,14 +163,11 @@
// The context is already associated with DOM - this is a refresh.
targetCtx.tmpl = fn;
targetCtx.nodes = [];
// Rebuild, without creating new a new template context
// Rebuild, without creating a new template context
return jQuery( build( targetCtx, null, targetCtx.tmpl( jQuery, targetCtx ) ));
}
if ( !data ) {
return fn;
}
if ( !parentCtx ) {
return []; //Could throw...
return fn;
}
if ( typeof data === "function" ) {
data = data.call( parentCtx.data || {}, parentCtx );
Expand Down Expand Up @@ -220,7 +217,7 @@
return frag ? frag : unencode( ret );
function unencode( text ) {
// createTextNode will not render HTML entities correctly
var el = document.createElement( "<span></span>");
var el = document.createElement( "span" );
el.innerHTML = text;
return jQuery.makeArray(el.childNodes);
}
Expand All @@ -243,7 +240,7 @@
function unescape( args ) {
return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
}
var cmd = jQuery.tmplTags[ type ], def, expr;
var cmd = jQuery.tmpl.tags[ type ], def, expr;
if ( !cmd ) {
throw "Template command not found: " + type;
}
Expand All @@ -259,7 +256,7 @@
fnargs = unescape( fnargs );
return "');" +
cmd[ slash ? "suffix" : "prefix" ]
.split( "$notnull_1" ).join( "typeof("+ target +")!=='undefined' && (" + target + ")!=null" )
.split( "$notnull_1" ).join( "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" )
.split( "$1a" ).join( exprAutoFnDetect )
.split( "$1" ).join( expr )
.split( "$2" ).join( fnargs ?
Expand All @@ -284,11 +281,18 @@
// Also $.templates( selectorToScriptBlock ) or $( selectorToScriptBlock ).templates() will return the cached compiled template.
templates: function( name, tmpl ) {
if (tmpl) {
return jQuery.templates[name] = jQuery.tmpl( tmpl );
return jQuery.templates[name] = jQuery.tmpl( tmpl, null );
}
return jQuery.templates[name] || jQuery( name ).tmpl();
return jQuery.templates[name] || jQuery( name ).tmpl( null );
},
tmplTags: {
encode: function( text ) {
// Do HTML encoding replacing < > & and ' and " by corresponding entities.
return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
}
});

jQuery.extend( jQuery.tmpl, {
tags: {
"tmpl": {
_default: { $2: "{}" },
prefix: "if($notnull_1){_=_.concat($ctx.nest($1,$2));}"
Expand Down Expand Up @@ -316,13 +320,6 @@
prefix: "if($notnull_1){_.push($.encode($1a));}"
}
},
encode: function( text ) {
// Do HTML encoding replacing < > & and ' and " by corresponding entities.
return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
}
});

jQuery.extend( jQuery.tmpl, {
complete: function( ctxs ) {
newCtxs = {};
},
Expand Down

0 comments on commit 8fc69f4

Please sign in to comment.