Fixed issue 5 for parenting of {{wrap}} items, and associated issue of

double events and potential memory leak. Also a couple of other minor bug fixes. Changed samples to always use parens when calling functions as template tag parameters, since this is better practice. (Implicit function invocation support only works in certain cases - basically when the function is the only token in the expression, and not part of a more complex expression. For this reason support for implicit function calls may be removed later.)
chrislm · Aug 24, 2010 · c09aa5e · c09aa5e
1 parent 466f1fc
commit c09aa5e
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 46 deletions.
diff --git a/demos/samplesCore/Interactive/tabsWrap.html b/demos/samplesCore/Interactive/tabsWrap.html
@@ -40,15 +40,15 @@ <h3>Remote</h3>
 <script id="tabsWrap" type="text/x-jquery-tmpl">
 	<table class="tabsView"><tbody>
 		<tr>
-			{{each tabs}}
+			{{each tabs()}}
 				<th class="${headerClass($index)}">
 					${$value}
 				</th>
 			{{/each}}
 		</tr>
-		<tr><td colspan="${tabCount}">
+		<tr><td colspan="${tabCount()}">
 			<div class="body">
-				{{html tabContent}}
+				{{html tabContent()}}
 			</div>
 		</td></tr>
 	</tbody></table>

diff --git a/demos/samplesCore/Interactive/tabsWrapNested.html b/demos/samplesCore/Interactive/tabsWrapNested.html
@@ -55,7 +55,7 @@ <h3>POST</h3>
 <script id="tabsWrap" type="text/x-jquery-tmpl">
 	<table class="tabsView"><tbody>
 		<tr>
-			{{each tabs}}
+			{{each tabs()}}
 				<th class="${headerClass($index)}">
 					${$value}
 				</th>

diff --git a/demos/samplesCore/Interactive/treeView.html b/demos/samplesCore/Interactive/treeView.html
@@ -18,7 +18,7 @@ <h1>Tree View</h1>
 
 <script id="folderTmpl" type="text/x-jquery-tmpl">
 	<li class="content_${hasContent($item)}">
-		<img class="expand" src="resources/${expanderImage}.png" />
+		<img class="expand" src="resources/${expanderImage()}.png" />
 		<img class="folder" src="resources/folder.png" />
 		<span>${name}</span>
 	</li>

diff --git a/demos/samplesCore/composition.html b/demos/samplesCore/composition.html
@@ -71,7 +71,7 @@
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
 	{{tmpl "#tmplSeparator"}}
-	<tr class="${alternate(this.data, people)}"><td colspan="2"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate(this.data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
 	{{if cities}}
 		{{tmpl(cities) getTemplate("City")}}
 	{{/if}}
@@ -83,7 +83,7 @@
 
 <script id="tmplCity" type="text/x-jquery-tmpl">
 	{{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 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/samplesCore/each.html b/demos/samplesCore/each.html
@@ -64,7 +64,7 @@
 </script>
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
-	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
 	{{each cities}}
 		<tr class="cityseparator"><td colspan="2"></td></tr>
 		<tr class="${alternate($data, people)}"><td colspan="2"><b><i>City ${index($value, cities)}:</i></b></td></tr>

diff --git a/demos/samplesCore/parameters.html b/demos/samplesCore/parameters.html
@@ -71,18 +71,18 @@
 </script>
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
-	<tr class="${alternate}"><td colspan="3"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate()}"><td colspan="3"><a href="${url}">${getName()}</a></td></tr>
 	{{tmpl "#tmplSeparator"}}
 	{{if getCityCount(startIndex, endIndex)}}
-		<tr class="${alternate}"><td colspan="3"><i>Favorite Cities</i></td></tr>
+		<tr class="${alternate()}"><td colspan="3"><i>Favorite Cities</i></td></tr>
 		{{each getCities(startIndex, endIndex)}}
 			{{tmpl(null, {type:"city"}) "#tmplSeparator"}}
-			<tr class="${alternate}">
+			<tr class="${alternate()}">
 				<td>${$index + 1}</td>
 				<td><b>${name}</b></td>
 				<td>${state}</td>
 			</tr>
-			<tr class="${alternate}"><td colspan="3"><i>${weather}...</i></td></tr>
+			<tr class="${alternate()}"><td colspan="3"><i>${weather}...</i></td></tr>
 		{{/each}}
 		{{tmpl "#tmplSeparator"}}
 	{{/if}}

diff --git a/demos/samplesTmplPlus/composition.html b/demos/samplesTmplPlus/composition.html
@@ -67,7 +67,7 @@
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
 	{{tmpl "#tmplSeparator"}}
-	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
 	{{if cities}}
 		{{tmpl(cities) getTemplate("City")}}
 	{{/if}}
@@ -83,7 +83,7 @@
 
 <script id="tmplCity" type="text/x-jquery-tmpl">
 	{{tmpl "#tmplCitySeparator"}}
-	<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 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/samplesTmplPlus/each.html b/demos/samplesTmplPlus/each.html
@@ -65,7 +65,7 @@
 </script>
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
-	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
 	{{each cities}}
 		<tr class="cityseparator"><td colspan="2"></td></tr>
 		<tr class="${alternate($data, people)}"><td colspan="2"><b><i>City ${index($value, cities)}:</i></b></td></tr>

diff --git a/demos/samplesTmplPlus/parameters.html b/demos/samplesTmplPlus/parameters.html
@@ -71,18 +71,18 @@
 </script>
 
 <script id="tmplPeople" type="text/x-jquery-tmpl">
-	<tr class="${alternate}"><td colspan="3"><a href="${url}">${getName}</a></td></tr>
+	<tr class="${alternate()}"><td colspan="3"><a href="${url}">${getName()}</a></td></tr>
 	{{tmpl "#tmplSeparator"}}
 	{{if getCityCount(startIndex, endIndex)}}
-		<tr class="${alternate}"><td colspan="3"><i>Favorite Cities</i></td></tr>
+		<tr class="${alternate()}"><td colspan="3"><i>Favorite Cities</i></td></tr>
 		{{each getCities(startIndex, endIndex)}}
 			{{tmpl(null, {type:"city"}) "#tmplSeparator"}}
-			<tr class="${alternate}">
+			<tr class="${alternate()}">
 				<td>${$index + 1}</td>
 				<td><b>${name}</b></td>
 				<td>${state}</td>
 			</tr>
-			<tr class="${alternate}"><td colspan="3"><i>${weather}...</i></td></tr>
+			<tr class="${alternate()}"><td colspan="3"><i>${weather}...</i></td></tr>
 		{{/each}}
 		{{tmpl "#tmplSeparator"}}
 	{{/if}}

diff --git a/jquery.tmpl.js b/jquery.tmpl.js
@@ -122,13 +122,16 @@
 				// This is a top-level tmpl call (not from a nested template using {{tmpl}})
 				parentItem = topTmplItem;
 				tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+				wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
 			} else if ( !tmpl ) {
 				// The template item is already associated with DOM - this is a refresh.
 				// Re-evaluate rendered template for the parentItem
 				tmpl = parentItem.tmpl;
 				newTmplItems[parentItem.key] = parentItem;
 				parentItem.nodes = [];
-				updateWrapped( parentItem );
+				if ( parentItem.wrapped ) {
+					updateWrapped( parentItem, parentItem.wrapped );
+				}
 				// Rebuild, without creating a new template item
 				return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
 			}
@@ -139,12 +142,7 @@
 				data = data.call( parentItem || {} );
 			}
 			if ( options && options.wrapped ) {
-				// Create template item for wrapped content, without rendering template
-				parentItem = newTmplItem( options, parentItem, null, data );
-				parentItem.key = ++itemKey;
-				wrappedItems[itemKey] = parentItem;
-				parentItem.tmpl = tmpl;
-				updateWrapped( parentItem );
+				updateWrapped( options, options.wrapped );
 			}
 			ret = jQuery.isArray( data ) ? 
 				jQuery.map( data, function( dataItem ) {
@@ -266,16 +264,19 @@
 	function build( tmplItem, nested, 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, ret = content ? jQuery.map( content, function( item ) {
 			return (typeof item === "string") ? 
 				// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
-				item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) :
+				(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
 				// This is a child template item. Build nested template.
 				build( item, tmplItem, item._ctnt );
-		});
+		}) : 
+		// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}. 
+		tmplItem;
 		if ( nested ) {
 			return ret;
 		}
+
 		// top-level template
 		ret = ret.join("");
 
@@ -305,7 +306,7 @@
 	// Generate a reusable function that will serve to render a template against data
 	function buildTmplFn( markup ) {
 		return new Function("jQuery","$item",
-			"var $=jQuery,_=[],$data=$item.data;" +
+			"var $=jQuery,call,_=[],$data=$item.data;" +
 
 			// Introduce the data as local variables using with(){}
 			"with($data){_.push('" +
@@ -355,16 +356,14 @@
 		);
 	}
 
-	function updateWrapped( tmplItem ) {
-		if ( tmplItem.wrapped ) {
-			var wrapped = tmplItem.wrapped;
-			// Build the wrapped content
-			tmplItem._wrap = build( tmplItem, true, 
-				jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()] 
-			).join("");
-		}
+	function updateWrapped( options, wrapped ) {
+		// Build the wrapped content. 
+		options._wrap = build( options, true, 
+			// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+			jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+		).join("");
 	}
-	
+
 	function unescape( args ) {
 		return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
 	}
@@ -387,9 +386,6 @@
 			}
 			processItemKey( elem );
 		}
-		// Cannot remove temporary wrappedItem objects, since needed during updating of nested items. //wrappedItems = {}; 
-		// TODO - ensure no memory leaks 
-
 		function processItemKey( el ) {
 			var pntKey, pntNode = el, pntItem, tmplItem, key;
 			// Ensure that each rendered template inserted into the DOM has its own template item,
@@ -404,8 +400,6 @@
 						tmplItem = wrappedItems[key];
 						tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode], null, true );
 						tmplItem.key = ++itemKey;
-						// Note that there is a remaining issue on parenting of wrappedItems.
-						// ...Currently there may be additional newTmplItems items wrapped contexts, leading to duplicate rendered events.
 						newTmplItems[itemKey] = tmplItem;
 					}
 					if ( cloneIndex ) {
@@ -451,7 +445,7 @@
 			return stack.pop();
 		}
 		var l = stack.length;
-		stack.push({ _: content, tmpl: tmpl, parent: l ? stack[l - 1].item : this, item:this, data: data, options: options });
+		stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
 	}
 
 	function tiNest( tmpl, data, options ) {
@@ -464,7 +458,7 @@
 		var options = call.options || {};
 		options.wrapped = wrapped;
 		// Apply the template, which may incorporate wrapped content, 
-		return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.parent );
+		return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
 	}
 
 	function tiHtml( filter, textOnly ) {