From 748a3568d2b93d4dd76f3804f429817284a938d8 Mon Sep 17 00:00:00 2001
From: BorisMoore <BorisMoore@gmail.com>
Date: Thu, 22 Jul 2010 17:08:31 -0700
Subject: [PATCH] Fix to ignore null or undefined members of array data, when
 using .tmpl(dataArray) to render template against the array

Fix so that ${foo} when foo is a function will call foo with the
template item as 'this' pointer, rather than having the current data item
as 'this' and passing the template item as a parameter. This removes
dependencies on the signature of the function, so existing functions (not
designed to be called on some this object) will work.
---
 demos/movies/PagesCore/movies.html      | 27 +++++++++++++++++++------
 demos/movies/PagesTmplPlus/movies1.html | 26 +++++++++++++++++++-----
 demos/movies/PagesTmplPlus/movies2.html | 13 ++++++++++--
 demos/movies/PagesTmplPlus/movies3.html | 10 ++++++---
 jquery.tmpl.js                          | 12 +++++------
 5 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/demos/movies/PagesCore/movies.html b/demos/movies/PagesCore/movies.html
index 506e7b9..973584b 100644
--- a/demos/movies/PagesCore/movies.html
+++ b/demos/movies/PagesCore/movies.html
@@ -103,7 +103,7 @@ <h1>Netflix: Book a Movie...</h1>
 </script>
 
 <script type="text/javascript">
-	var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
+	var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
 		cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = {}, selectedBooking;
 		
 	getMovies( pageIndex );
@@ -192,13 +192,19 @@ <h1>Netflix: Book a Movie...</h1>
 		
 		$( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
 		
-		// show movies in template
 		$( "#movieList" ).empty();
 		
 		$( "#movieTmpl" )
-			.tmpl( movies ) //, { rendered: onMovieRendered } )
+			// Render movies using the movieTemplate
+			.tmpl( movies ) 
+			
+			// Display rendered movies in the movieList container
 			.appendTo( "#movieList" )
+			
+			// Animate
 			.find( "div" ).fadeIn( 4000 ).end()
+			
+			// Add click handler
 			.find( ".buyButton" ).click( function() { 
 				buyTickets( $(this).tmplItem().data ); 
 			});
@@ -239,14 +245,23 @@ <h1>Netflix: Book a Movie...</h1>
 			switchView( booking, true );
 		} else {
 			cart.bookings[booking.movie.Id] = booking;
+
 			var bookingNode = $( "#bookingEditTmpl" )
+	
+				// Render the booking for the chosen movie using the bookingEditTemplate
 				.tmpl( booking, { animate: true } ) 
-				.appendTo( "#bookingsList" ).last()[0];
+	
+				// Append the rendered booking to the bookings list
+				.appendTo( "#bookingsList" )
 				
-			// Attach handlers etc. on the rendered template.
-			// Pass the template context of the second tr, which the context for the "bookingEditTmpl" template
+				// Get the 2nd <tr> of the appended booking
+				.last()[0];
+				
+			// Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
 			var newItem = $.tmplItem( bookingNode );
 			bookingTmplItems[booking.movie.Id] = newItem;
+
+			// Attach handlers etc. on the rendered template.
 			bookingEditRendered( newItem ); 
 		}
 	}
diff --git a/demos/movies/PagesTmplPlus/movies1.html b/demos/movies/PagesTmplPlus/movies1.html
index 80b054e..7296f30 100644
--- a/demos/movies/PagesTmplPlus/movies1.html
+++ b/demos/movies/PagesTmplPlus/movies1.html
@@ -105,7 +105,7 @@ <h1>Netflix: Book a Movie...</h1>
 </script>
 
 <script type="text/javascript">
-	var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
+	var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
 		cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
 		
 	getMovies( pageIndex );
@@ -196,9 +196,16 @@ <h1>Netflix: Book a Movie...</h1>
 		$( "#movieList" ).empty();
 		
 		$( "#movieTmpl" )
-			.tmpl( movies ) //, { rendered: onMovieRendered } )
+			// Render movies using the movieTemplate
+			.tmpl( movies ) 
+			
+			// Display rendered movies in the movieList container
 			.appendTo( "#movieList" )
+			
+			// Animate
 			.find( "div" ).fadeIn( 4000 ).end()
+			
+			// Add click handler
 			.find( ".buyButton" ).click( function() { 
 				buyTickets( $(this).tmplItem().data ); 
 			});
@@ -239,14 +246,23 @@ <h1>Netflix: Book a Movie...</h1>
 			switchView( booking, true );
 		} else {
 			cart.bookings[booking.movie.Id] = booking;
+		
 			var bookingNode = $( "#bookingEditTmpl" )
+		
+				// Render the booking for the chosen movie using the bookingEditTemplate
 				.tmpl( booking, { animate: true } ) 
-				.appendTo( "#bookingsList" ).last()[0];
+
+				// Append the rendered booking to the bookings list
+				.appendTo( "#bookingsList" )
 				
-			// Attach handlers etc. on the rendered template.
-			// Pass the template context of the second tr, which the context for the "bookingEditTmpl" template
+				// Get the 2nd <tr> of the appended booking
+				.last()[0];
+				
+			// Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
 			var newItem = $.tmplItem( bookingNode );
 			bookingTmplItems.push( newItem );
+
+			// Attach handlers etc. on the rendered template.
 			bookingEditRendered( newItem ); 
 		}
 	}
diff --git a/demos/movies/PagesTmplPlus/movies2.html b/demos/movies/PagesTmplPlus/movies2.html
index 5a69f7a..7ddce5d 100644
--- a/demos/movies/PagesTmplPlus/movies2.html
+++ b/demos/movies/PagesTmplPlus/movies2.html
@@ -104,7 +104,7 @@ <h1>Netflix: Book a Movie...</h1>
 </script>
 
 <script type="text/javascript">
-	var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
+	var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
 		cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
 		
 	getMovies( pageIndex );
@@ -194,7 +194,10 @@ <h1>Netflix: Book a Movie...</h1>
 		$( "#movieList" ).empty();
 		
 		$( "#movieTmpl" )
+			// Render movies using the movieTemplate
 			.tmpl( movies, { rendered: onMovieRendered } )
+	
+			// Display rendered movies in the movieList container
 			.appendTo( "#movieList" );
 		
 		$( "#movieList" ).fadeIn( "medium" )
@@ -233,12 +236,18 @@ <h1>Netflix: Book a Movie...</h1>
 			switchView( booking, true );
 		} else {
 			cart.bookings[booking.movie.Id] = booking;
+
 			$( "#bookingEditTmpl" )
+
+				// Render the booking for the chosen movie using the bookingEditTemplate
 				.tmpl( booking, { 
 					animate: true, 
 					rendered: onBookingEditRendered, 
 					addedTmplItems: bookingTmplItems 
-				}).appendTo( "#bookingsList" );
+				})
+				
+				// Append the rendered booking to the bookings list
+				.appendTo( "#bookingsList" );
 		}
 	}
 
diff --git a/demos/movies/PagesTmplPlus/movies3.html b/demos/movies/PagesTmplPlus/movies3.html
index f920c23..83b62cc 100644
--- a/demos/movies/PagesTmplPlus/movies3.html
+++ b/demos/movies/PagesTmplPlus/movies3.html
@@ -104,7 +104,7 @@ <h1>Netflix: Book a Movie...</h1>
 </script>
 
 <script type="text/javascript">
-	var genre="Cartoons", pageIndex=1, pageSize=3, pageCount=0,
+	var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
 		cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
 		
 	getMovies( pageIndex );
@@ -188,11 +188,13 @@ <h1>Netflix: Book a Movie...</h1>
 		
 		$( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
 		
-		// show movies in template
 		$( "#movieList" )
 			.empty()
+
+			// Render movies using the movieTemplate, and display rendered movies in the movieList container
 			.append( "#movieTmpl", movies, { rendered: onMovieRendered } )
-			.fadeIn( "fast" );
+
+			.fadeIn( "medium" );
 	}
 
 	function buyTickets( movie ) {
@@ -228,6 +230,8 @@ <h1>Netflix: Book a Movie...</h1>
 			switchView( booking, true );
 		} else {
 			cart.bookings[booking.movie.Id] = booking;
+
+			// Render the booking for the chosen movie using the bookingEditTemplate, and append the rendered booking to the bookings list
 			$( "#bookingsList" ).append( "#bookingEditTmpl", booking, { 
 				animate: true, 
 				rendered: onBookingEditRendered, 
diff --git a/jquery.tmpl.js b/jquery.tmpl.js
index 2c1155a..f9c37e3 100644
--- a/jquery.tmpl.js
+++ b/jquery.tmpl.js
@@ -132,11 +132,11 @@
 				return []; // Could throw...
 			}
 			if ( typeof data === "function" ) {
-				data = data.call( parentItem.data || {}, parentItem );
+				data = data.call( parentItem || {} );
 			}
 			ret = jQuery.isArray( data ) ? 
 				jQuery.map( data, function( dataItem ) {
-					return newTmplItem( options, parentItem, tmpl, dataItem );
+					return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
 				}) :
 				[ newTmplItem( options, parentItem, tmpl, data ) ];
 
@@ -264,9 +264,7 @@
 		// Support templates which have initial or final text nodes, or consist only of text
 		// Also support HTML entities within the HTML markup.
 		ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
-			frag = jQuery( middle ).get(); // For now use get(), since buildFragment is not current public
-//					frag = jQuery.buildFragment( [middle] ); // If buildFragment was public, could do these two lines instead
-//					frag = frag.cacheable ? frag.fragment.cloneNode(true) : frag.fragment;
+			frag = jQuery( middle ).get(); 
 
 			storeTmplItems( frag );
 			if ( before ) {
@@ -280,7 +278,7 @@
 	}
 
 	function unencode( text ) {
-		// createTextNode will not render HTML entities correctly
+		// Use createElement, since createTextNode will not render HTML entities correctly
 		var el = document.createElement( "div" );
 		el.innerHTML = text;
 		return jQuery.makeArray(el.childNodes);
@@ -301,7 +299,7 @@
 				.replace( /\${([^}]*)}/g, "{{= $1}}" )
 				.replace( /{{(\/?)(\w+|.)(?:\(((?:.(?!}}))*?)?\))?(?:\s+(.*?)?)?(\((.*?)\))?\s*}}/g,
 				function( all, slash, type, fnargs, target, parens, args ) {
-					var cmd = jQuery.tmpl.tags[ type ], def, expr;
+					var cmd = jQuery.tmpl.tags[ type ], def, expr, exprAutoFnDetect;
 					if ( !cmd ) {
 						throw "Template command not found: " + type;
 					}