From 8f167dc8b66af275704f3aec809eb0901c4847ba Mon Sep 17 00:00:00 2001
From: BorisMoore <BorisMoore@gmail.com>
Date: Fri, 2 Jul 2010 18:31:07 -0700
Subject: [PATCH] Second stage of factoring into separate files - core minimal
 template functionality in jquery.tmpl.js, intended to enable primary
 templating scenarios - additional templating features or support for more
 advanced/less common scenarios in one or more additional files. Currently:
 jquery.tmplPlus.js.

In this commit, jquery.tmplPlus.js contains support for the rendered event, and for the append pattern,
which have been removed from jquery.tmpl.js.
It also contains the tmplCmd plugin previously in jquery.tmplCmd.js

Samples organized into folders based on whether they use only the core tmpl functionality, or additional tmplPlus functionality.
---
 README.md                                     | 30 ++++++-
 .../{PagesTmplCore => PagesCore}/movies.html  | 10 +--
 demos/movies/PagesTmplPlus/movies1.html       | 10 +--
 demos/movies/PagesTmplPlus/movies2.html       |  8 +-
 demos/movies/PagesTmplPlus/movies3.html       |  8 +-
 .../basic.html                                | 75 ++++++++++++----
 .../composition.html                          | 11 ++-
 .../{samplesAppend => samplesCore}/each.html  |  0
 .../parameters.html                           |  0
 .../basic.html                                | 12 +--
 .../composition.html                          |  1 +
 .../each.html                                 |  1 +
 .../parameters.html                           |  1 +
 jquery.tmpl.js                                | 86 ++++++++-----------
 jquery.tmplPlus.js                            | 28 +++++-
 15 files changed, 175 insertions(+), 106 deletions(-)
 rename demos/movies/{PagesTmplCore => PagesCore}/movies.html (98%)
 rename demos/{samplesAppendTo => samplesCore}/basic.html (50%)
 rename demos/{samplesAppendTo => samplesCore}/composition.html (91%)
 rename demos/{samplesAppend => samplesCore}/each.html (100%)
 rename demos/{samplesAppendTo => samplesCore}/parameters.html (100%)
 rename demos/{samplesAppend => samplesTmplPlus}/basic.html (81%)
 rename demos/{samplesAppend => samplesTmplPlus}/composition.html (97%)
 rename demos/{samplesAppendTo => samplesTmplPlus}/each.html (96%)
 rename demos/{samplesAppend => samplesTmplPlus}/parameters.html (97%)

diff --git a/README.md b/README.md
index 3331995..ad405b4 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,32 @@
 A jQuery templating plugin - created for demonstration purposes.
+____________________________________________________________________
 
-    // Appends one LI, filled with data, into the UL
-    $("ul").append( tmpl, dataObject );
+	// Render one LI, filled with data, then append it into the UL
+	$.tmpl( "<li>${firstName}</li>", dataObject )
+		.appendTo( "ul" );
+____________________________________________________________________
 
-    // Appends multiple LI, filled with data, into the UL
-    $("ul").append( tmpl, arrayOfDataObjects );
+	<!-- 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" )
+		.click( function() {
+			alert( $.tmpl(this).data.firstName );
+		});
+____________________________________________________________________
 
 A demo page using this plugin can be found here:
 http://infinity88.com/jquery-tmpl/movies/movies.htm 
\ No newline at end of file
diff --git a/demos/movies/PagesTmplCore/movies.html b/demos/movies/PagesCore/movies.html
similarity index 98%
rename from demos/movies/PagesTmplCore/movies.html
rename to demos/movies/PagesCore/movies.html
index 79cfd11..b214104 100644
--- a/demos/movies/PagesTmplCore/movies.html
+++ b/demos/movies/PagesCore/movies.html
@@ -125,9 +125,9 @@ <h1>Netflix: Book a Movie...</h1>
 	$( "#cartTmpl" )
 		.tmpl( cart )
 		.appendTo( ".cart", cart );
-	
-	var cartCtx = $.tmpl( ".cart td" );
-	
+
+	var cartCtx = $( ".cart td" ).tmpl();
+
 	function selectGenre() {
 		$( "#genres li" ).removeClass( "selected" );
 		$( this ).addClass( "selected" );
@@ -293,7 +293,7 @@ <h1>Netflix: Book a Movie...</h1>
 			return;
 		}
 		var ctx = bookingCtxs[booking.movie.Id],
-			tmpl = $.tmpl(edit ? "#bookingEditTmpl" : "#bookingTitleTmpl"); 
+			tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl(); 
 		if ( ctx.tmpl !== tmpl) {
 			ctx.tmpl = tmpl; 
 			updateContext( ctx );
@@ -339,7 +339,7 @@ <h1>Netflix: Book a Movie...</h1>
 
 	function updateContext( ctx ) {
 		var coll = ctx.nodes;
-		$( coll[0] ).before( ctx);
+		$.tmpl( null, null, null, ctx ).insertBefore( coll[0] );
 		$( coll ).remove();
 	}
 
diff --git a/demos/movies/PagesTmplPlus/movies1.html b/demos/movies/PagesTmplPlus/movies1.html
index 3a826ec..1e8dad4 100644
--- a/demos/movies/PagesTmplPlus/movies1.html
+++ b/demos/movies/PagesTmplPlus/movies1.html
@@ -123,13 +123,13 @@ <h1>Netflix: Book a Movie...</h1>
 			removeBookings(); 
 		})
 		.empty();
-	
+
 	$( "#cartTmpl" )
 		.tmpl( cart )
 		.appendTo( ".cart", cart );
-	
-	var cartCtx = $.tmpl( ".cart td" );
-	
+
+	var cartCtx = $( ".cart td" ).tmpl();
+
 	function selectGenre() {
 		$( "#genres li" ).removeClass( "selected" );
 		$( this ).addClass( "selected" );
@@ -293,7 +293,7 @@ <h1>Netflix: Book a Movie...</h1>
 			return;
 		}
 		var ctx = bookingCtx( booking ),
-			tmpl = $.tmpl(edit ? "#bookingEditTmpl" : "#bookingTitleTmpl"); 
+			tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl(); 
 		if ( ctx.tmpl !== tmpl) {
 			ctx.tmpl = tmpl; 
 			$.tmplCmd( "update", ctx );
diff --git a/demos/movies/PagesTmplPlus/movies2.html b/demos/movies/PagesTmplPlus/movies2.html
index 37f73e1..e9e9dcc 100644
--- a/demos/movies/PagesTmplPlus/movies2.html
+++ b/demos/movies/PagesTmplPlus/movies2.html
@@ -125,9 +125,9 @@ <h1>Netflix: Book a Movie...</h1>
 	$( "#cartTmpl" )
 		.tmpl( cart )
 		.appendTo( ".cart", cart );
-	
-	var cartCtx = $.tmpl( ".cart td" );
-	
+
+	var cartCtx = $( ".cart td" ).tmpl();
+
 	function selectGenre() {
 		$( "#genres li" ).removeClass( "selected" );
 		$( this ).addClass( "selected" );
@@ -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"; 
+			ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl(); 
 			ctx.rendered = rendered; 
 			$.tmplCmd( "update", ctx );
 		}
diff --git a/demos/movies/PagesTmplPlus/movies3.html b/demos/movies/PagesTmplPlus/movies3.html
index 35b5be4..0167a95 100644
--- a/demos/movies/PagesTmplPlus/movies3.html
+++ b/demos/movies/PagesTmplPlus/movies3.html
@@ -123,9 +123,9 @@ <h1>Netflix: Book a Movie...</h1>
 		})
 		.empty()
 		.append( "#cartTmpl", cart );
-	
-	var cartCtx = $.tmpl( ".cart td" );
-	
+
+	var cartCtx = $( ".cart td" ).tmpl();
+
 	function selectGenre() {
 		$( "#genres li" ).removeClass( "selected" );
 		$( this ).addClass( "selected" );
@@ -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"; 
+			ctx.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).tmpl(); 
 			ctx.rendered = rendered; 
 			$.tmplCmd( "update", ctx );
 		}
diff --git a/demos/samplesAppendTo/basic.html b/demos/samplesCore/basic.html
similarity index 50%
rename from demos/samplesAppendTo/basic.html
rename to demos/samplesCore/basic.html
index d1ccdad..43c528e 100644
--- a/demos/samplesAppendTo/basic.html
+++ b/demos/samplesCore/basic.html
@@ -1,6 +1,12 @@
 <!--
 This sample illustrates some basic templating features and scenarios.
 -->
+<style type="text/css">
+	.clickable 	{
+		cursor:pointer;
+		color: Blue;
+	}   
+</style>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
 <script>
@@ -53,33 +59,65 @@
 }
 
 jQuery(function(){
+	// A template string
 	var tmpl = '<li><a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>';
-	$.templates.myTmpl = $.tmpl('<li>My template: <a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>');
-		
+	
 	// Renders one LI, filled with data, then appends it into the UL
-	$.tmpl( tmpl, dataObject ).appendTo( "ul" );
-
-	// Use template from $.templates. 
-	// Renders template stored under $.templates, then inserts after target. 
+	$.tmpl( tmpl, dataObject )
+		.appendTo( "ul" );
+	
+	// Store a compiled template for later use
+	$.templates.myTmpl = $.tmpl( '<li>My template: <a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>' );
+		
+	// Render stored template and insert after target. 
 	// Target wrapped set has more than one element, so rendered template cloned into two places in DOM
-	$.tmpl( "myTmpl", dataObject ).insertAfter( ".multiple" );
+	$.tmpl( "myTmpl", dataObject )
+		.insertAfter( ".multiple" );
 
-	// Appends multiple LIs for each item. Set option: showCities, referenced within the template.
-	$( "#sometmpl" ).tmpl( arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } ).prependTo( "ul" );
-	$.tmpl( "#sometmpl", arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } ).prependTo( "ul" );
+	// Use a template declared in a script block
+	// Appends multiple LIs - one for each item. 
+	$( "#sometmpl" )
+		.tmpl( arrayOfDataObjects )
+		.appendTo( "ul" );
+	
+	// Alternative syntax
+	$.tmpl( "#sometmpl", arrayOfDataObjects )
+		.appendTo( "ul" );
 
+	// Set options: showCities and array, referenced within the template.
+	$( "#sometmpl" )
+		.tmpl( arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } )
+		.prependTo( "ul" );
+	
+	// Getting to the data in a click event.
+	$( "#sometmpl" )
+		.tmpl( arrayOfDataObjects )
+		.prependTo( "ul" )
+		.find( "span" )
+		.addClass( "clickable" )
+		.click( function() {
+			var ctx = $.tmpl(this); 
+			alert( ctx.data.firstName + " at " + ctx.data.url );
+		});
+	
 	// Example of template that has leading or trailing text
-	$( "#leadingOrTrailingText" ).tmpl( arrayOfDataObjects ).insertBefore( "#target" );
+	$( "#leadingOrTrailingText" )
+		.tmpl( arrayOfDataObjects )
+		.insertBefore( ".target" );
 });
 </script>
 
 <script id="sometmpl" type="text/html">
-	<li>${index($ctx.array)} of ${$ctx.array.length}) <a href="${url}">${getName()}</a>
-	{{if $ctx.showCities}}
-		Cities: {{each cities}} ${this} {{/each}}
-	{{else}}
-		No Cities
-	{{/if}}
+	<li>
+		{{if $ctx.array}}
+			${index($ctx.array)} of ${$ctx.array.length})
+		{{/if}}
+		 <span>${getName()}</span>
+		{{if $ctx.showCities}}
+			Cities: {{each cities}} ${this} {{/each}}
+		{{else}}
+			No Cities
+		{{/if}}
 	</li>
 </script>
 
@@ -87,7 +125,6 @@
 	${firstName} <strong>${lastName}</strong> <br/>
 </script>
 
-<ul><li class="multiple">first</li><li class="multiple">last</li></ul>
 <ul><li class="multiple">first</li><li class="multiple">last</li></ul>
 
-<div id="target"></div>
+<div class="target">Target</div>
\ No newline at end of file
diff --git a/demos/samplesAppendTo/composition.html b/demos/samplesCore/composition.html
similarity index 91%
rename from demos/samplesAppendTo/composition.html
rename to demos/samplesCore/composition.html
index 4510b7c..c40d381 100644
--- a/demos/samplesAppendTo/composition.html
+++ b/demos/samplesCore/composition.html
@@ -53,10 +53,13 @@
 }
 
 function getTemplate( key ) {
-	return $.tmpl("#tmpl" + key);
+	return $("#tmpl" + key).tmpl();
 }
 
 $(function(){
+	// Create named template, to be used in composition below
+	$.templates.citySeparator = $.tmpl( '<tr class="citySeparator"><td colspan="2"></td></tr>' );
+	
 	$("#tmplPeople")
 		.tmpl( people )
 		.appendTo(".peopleTable");
@@ -78,12 +81,8 @@
 	<tr class="separator"><td colspan="2"></td></tr>
 </script>
 
-<script id="tmplCitySeparator" type="text/html">
-	<tr class="citySeparator"><td colspan="2"></td></tr>
-</script>
-
 <script id="tmplCity" type="text/html">
-	{{tmpl "#tmplCitySeparator"}}
+	{{tmpl "citySeparator"}}
 	<tr class="${alternate(this.parent.data, people)}"><td colspan="2"><b><i>City ${cityNumber}:</i></b></td></tr>
 	<tr class="${alternate(this.parent.data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
 </script>
diff --git a/demos/samplesAppend/each.html b/demos/samplesCore/each.html
similarity index 100%
rename from demos/samplesAppend/each.html
rename to demos/samplesCore/each.html
diff --git a/demos/samplesAppendTo/parameters.html b/demos/samplesCore/parameters.html
similarity index 100%
rename from demos/samplesAppendTo/parameters.html
rename to demos/samplesCore/parameters.html
diff --git a/demos/samplesAppend/basic.html b/demos/samplesTmplPlus/basic.html
similarity index 81%
rename from demos/samplesAppend/basic.html
rename to demos/samplesTmplPlus/basic.html
index a49c566..9d4a381 100644
--- a/demos/samplesAppend/basic.html
+++ b/demos/samplesTmplPlus/basic.html
@@ -2,7 +2,8 @@
 This sample illustrates some basic templating features and scenarios.
 -->
 <script src="http://code.jquery.com/jquery.js"></script>
-<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript" ></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script>
 
 var dataObject = {
@@ -53,8 +54,10 @@
 }
 
 jQuery(function(){
+	
 	var tmpl = '<li><a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>';
-	$.templates.myTmpl = $.tmpl('<li>My template: <a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>');
+	// Store a compiled template for later use
+	$.templates.myTmpl = $.tmpl( '<li>My template: <a href="${url}">${getName()}</a> {{if $ctx.showCities}}(${cityJoin()}){{/if}}</li>' );
 		
 	// Renders one LI, filled with data, then appends it into the UL
 	$("ul").append( tmpl, dataObject );
@@ -64,7 +67,7 @@
 	// Target wrapped set has more than one element, so rendered template cloned into two places in DOM
 	$(".multiple").after( "myTmpl", dataObject );
 
-	// Appends multiple LIs for each item. Set option: showCities, referenced within the template.
+	// Appends multiple LIs for each item. Set options: showCities and array, referenced within the template.
 	$("ul").prepend( "#sometmpl", arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } );
 
 	// Example of template that has leading or trailing text
@@ -86,7 +89,6 @@
 	${firstName} <strong>${lastName}</strong> <br/>
 </script>
 
-<ul><li class="multiple">first</li><li class="multiple">last</li></ul>
 <ul><li class="multiple">first</li><li class="multiple">last</li></ul>
 
-<div id="target"></div>
+<div id="target">Target</div>
diff --git a/demos/samplesAppend/composition.html b/demos/samplesTmplPlus/composition.html
similarity index 97%
rename from demos/samplesAppend/composition.html
rename to demos/samplesTmplPlus/composition.html
index 311820c..d7910d4 100644
--- a/demos/samplesAppend/composition.html
+++ b/demos/samplesTmplPlus/composition.html
@@ -12,6 +12,7 @@
 
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script>
 var people = [
 	{
diff --git a/demos/samplesAppendTo/each.html b/demos/samplesTmplPlus/each.html
similarity index 96%
rename from demos/samplesAppendTo/each.html
rename to demos/samplesTmplPlus/each.html
index 6991e6f..f715edd 100644
--- a/demos/samplesAppendTo/each.html
+++ b/demos/samplesTmplPlus/each.html
@@ -13,6 +13,7 @@
 
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script>
 $(function(){
 	$("#tmplPeople")
diff --git a/demos/samplesAppend/parameters.html b/demos/samplesTmplPlus/parameters.html
similarity index 97%
rename from demos/samplesAppend/parameters.html
rename to demos/samplesTmplPlus/parameters.html
index c79befd..75d402f 100644
--- a/demos/samplesAppend/parameters.html
+++ b/demos/samplesTmplPlus/parameters.html
@@ -12,6 +12,7 @@
 
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script>
 $(function(){
 	$(".peopleTable")
diff --git a/jquery.tmpl.js b/jquery.tmpl.js
index 5648198..08ebbdb 100644
--- a/jquery.tmpl.js
+++ b/jquery.tmpl.js
@@ -65,8 +65,9 @@
 				cloneIndex = 0;
 				ret = this.pushStack( ret, name, insert.selector );
 			}
-			jQuery.tmpl.complete( appendToCtxs );
+			var ctxs = appendToCtxs;
 			appendToCtxs = null;
+			jQuery.tmpl.complete( ctxs );
 			return ret;
 		};
 	});
@@ -84,62 +85,30 @@
 			return jQuery.tmpl( this[0] );
 		},
 
-		// This will allow us to do: .append( "template", dataObject )
 		domManip: function( args, table, callback, options ) {
 			// This appears to be a bug in the appendTo, etc. implementation
 			// it should be doing .call() instead of .apply(). See #6227
-			var ctxs, parentCtx, dmArgs = jQuery.makeArray( arguments ),
-				arg0 = args[0], argsLength = args.length, i = 0, ctx;
-			
-			newCtxs = appendToCtxs || {};
-			if ( arg0.nodeType ) {
+			if ( args[0].nodeType ) {
+				var dmArgs = jQuery.makeArray( arguments ), argsLength = args.length, i = 0, ctx;
 				while ( i < argsLength && !(ctx = jQuery.data( args[i++], "tmplCtx" ))) {};
-				parentCtx = ctx ? topCtx : null;
 				if ( argsLength > 1 ) {
 					dmArgs[0] = [jQuery.makeArray( args )];
 				}
+				if ( ctx && cloneIndex ) {
+					dmArgs[2] = function( fragClone ) {
+						// Handler called by oldManip when rendered template has been inserted into DOM.
+						jQuery.tmpl.afterManip( topCtx, this, fragClone, callback );
+					}
+				}
+				oldManip.apply( this, dmArgs );
+			} else {
+				oldManip.apply( this, arguments );
 			}
-			else if ( args.length >= 2 && typeof args[1] === "object" && !args[1].nodeType && !(args[1] instanceof jQuery)) {
-				// args[1] is data, for a template. Eval template to obtain fragment to clone and insert
-				parentCtx = args[3] || topCtx;
-				dmArgs[0] = [ jQuery.tmpl( arg0, args[1], args[2], parentCtx, true ) ];
-			}
-			else if ( argsLength === 1 && typeof arg0 === "object" && !(arg0 instanceof jQuery) ) {
-				// args[0] is template context (already inserted in DOM) to be refreshed
-				parentCtx = arg0;
-				newCtxs[parentCtx.key] = parentCtx;
-				dmArgs[0] = jQuery.tmpl( null, null, null, parentCtx );
-				dmArgs[1] = parentCtx.data;
-			}
- 
-			if ( parentCtx ) {
-				dmArgs[2] = tmplCallback;
-			}
-
-			oldManip.apply( this, dmArgs );
-
 			cloneIndex = 0;
 			if ( !appendToCtxs ) {
 				jQuery.tmpl.complete( newCtxs );
 			}
-			newCtxs = {};
 			return this;
-
-			function tmplCallback( fragClone ) {
-				// Called by oldManip when $.template has been used to create content.
-				// Provides cloned fragment ready for fixup prior to and after insertion into DOM
-				var content = fragClone.nodeType === 11 ?
-					jQuery.makeArray(fragClone.childNodes) :
-					fragClone.nodeType === 1 ? [fragClone] : [];
-
-				// Return fragment to original caller (e.g. append) for DOM insertion
-				callback.call( this, fragClone );
-
-				// Fragment has been inserted:- Add inserted nodes to context. Replace inserted element annotations by jQuery.data.
-				storeContexts( content );
-				cloneIndex++;
-				delete parentCtx.content;
-			}
 		}
 	});
 
@@ -150,9 +119,9 @@
 				// Re-evaluate rendered template for the parentCtx
 				targetCtx = parentCtx;
 				tmpl =  parentCtx.tmpl;
-				data = parentCtx.data;
+				newCtxs[parentCtx.key] = parentCtx;
 			} else if ( data && !parentCtx ) {
-				// This is a top-level tmpl call (not from nesting using {{tmpl}})
+				// This is a top-level tmpl call (not from a nested template using {{tmpl}})
 				parentCtx = topCtx;
 				wrapped = true;
 			}
@@ -173,7 +142,7 @@
 			// Generate a reusable function that will serve as a template
 			// generator (and which will be cached).
 			if ( tmpl instanceof jQuery ) {
-				tmpl = tmpl.get(0);
+				tmpl = tmpl.get(0) || {};
 			}
 			if ( tmpl.nodeType && arguments.length === 1 && tmpl.nodeType === 1 && tmpl.getAttribute( "type" ) !== "text/html" ) {
 				// Return template context for an element, unless element is a script block template declaration.
@@ -194,6 +163,7 @@
 				// The context is already associated with DOM - this is a refresh.
 				targetCtx.tmpl = fn;
 				targetCtx.nodes = [];
+				// Rebuild, without creating new a new template context
 				return jQuery( build( targetCtx, null, targetCtx.tmpl( jQuery, targetCtx ) ));
 			}
 			if ( !data ) {
@@ -218,7 +188,7 @@
 			function build( ctx, parent, content ) {
 				// Convert hierarchical content into flat string array 
 				// and finally return array of fragments ready for DOM insertion
-				var frag, ret = jQuery.map( content, function( item ) {
+				var frag, el, ret = jQuery.map( content, function( item ) {
 					return (typeof item === "string") ? 
 						// Insert context annotations, to be converted to jQuery.data( "tmplCtx" ) when elems are inserted into DOM.
 						item.replace( /(<\w+)([^>]*)/g, "$1 " + tCtxAtt + "=\"" + ctx.key + "\" $2" ) : 
@@ -241,7 +211,7 @@
 					storeContexts( frag );
 					if ( !!before ) frag.unshift( document.createTextNode( before ));
 					if ( !!after ) frag.push( document.createTextNode( after ));
-				});
+ 				});
 				return frag ? frag : document.createTextNode( ret );
 			}
 
@@ -338,7 +308,23 @@
 	});
 
 	jQuery.extend( jQuery.tmpl, {
-		complete: jQuery.noop
+		complete: function( ctxs ) {
+			newCtxs = {};
+		},
+		afterManip: function afterManip( parentCtx, elem, fragClone, callback ) {
+			// Provides cloned fragment ready for fixup prior to and after insertion into DOM
+			var content = fragClone.nodeType === 11 ?
+				jQuery.makeArray(fragClone.childNodes) :
+				fragClone.nodeType === 1 ? [fragClone] : [];
+
+			// Return fragment to original caller (e.g. append) for DOM insertion
+			callback.call( elem, fragClone );
+
+			// Fragment has been inserted:- Add inserted nodes to context. Replace inserted element annotations by jQuery.data.
+			storeContexts( content );
+			cloneIndex++;
+			delete parentCtx.content;
+		}
 	});
 
 	// Store template contexts in jQuery.data(), ensuring a unique context for each rendered template instance. 
diff --git a/jquery.tmplPlus.js b/jquery.tmplPlus.js
index 4e2bd43..07f233c 100644
--- a/jquery.tmplPlus.js
+++ b/jquery.tmplPlus.js
@@ -3,10 +3,11 @@
 * Requires jquery.tmpl.js 
 */
 (function (jQuery) {
-	var oldComplete = jQuery.tmpl.complete;
+	var oldComplete = jQuery.tmpl.complete, oldManip = jQuery.fn.domManip;
 
 	// Override jQuery.tmpl.complete in order to provide rendered event.
 	jQuery.tmpl.complete = function( ctxs ) {
+		oldComplete( ctxs);
 		for ( var ctx in ctxs ) {
 			ctx =  ctxs[ctx]; 
 			// Raise rendered event
@@ -14,9 +15,8 @@
 				ctx.rendered( ctx );
 			}
 		}
-		oldComplete( ctxs);
 	}
-	
+
 	jQuery.extend({
 		tmplCmd: function( command, data, contexts ) {
 			var retCtxs = [], before; 
@@ -31,7 +31,7 @@
 				coll = ctx.nodes;
 				switch ( command ) {
 					case "update":
-						jQuery( coll[0] ).before( ctx );
+						jQuery.tmpl( null, null, null, ctx ).insertBefore( coll[0] );
 						jQuery( coll ).remove();
 						break;
 					case "remove":
@@ -63,6 +63,26 @@
 			}
 		}
 	});
+
+	jQuery.fn.extend({
+		domManip: function (args, table, callback, options) {
+			var parentCtx, data = args[1], tmpl = args[0], dmArgs;
+			if ( args.length >= 2 && typeof data === "object" && !data.nodeType && !(data instanceof jQuery)) {
+				dmArgs = jQuery.makeArray( arguments );
+				// args[1] is data, for a template. Eval template to obtain fragment to clone and insert
+				parentCtx = args[3] || { key: 0 };
+				
+				dmArgs[0] = [ jQuery.tmpl( tmpl, data, args[2], parentCtx, true ) ];
+				
+				dmArgs[2] = function( fragClone ) {
+					// Handler called by oldManip when rendered template has been inserted into DOM.
+					jQuery.tmpl.afterManip( parentCtx, this, fragClone, callback );
+				}
+				return oldManip.apply( this, dmArgs );
+			}
+			return oldManip.apply( this, arguments );
+		}
+	});
 })(jQuery);