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.
sportula · Jul 3, 2010 · 8f167dc · 8f167dc
1 parent 25dd9f6
commit 8f167dc
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 106 deletions.
diff --git 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 
diff --git a/demos/movies/PagesTmplCore/movies.html → demos/movies/PagesCore/movies.html b/demos/movies/PagesTmplCore/movies.html → 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
@@ -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
@@ -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
@@ -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 → demos/samplesCore/basic.html b/demos/samplesAppendTo/basic.html → 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,41 +59,72 @@
 }
 
 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>
 
 <script id="leadingOrTrailingText" type="text/html">
 	${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>
diff --git a/demos/samplesAppendTo/composition.html → demos/samplesCore/composition.html b/demos/samplesAppendTo/composition.html → 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 → demos/samplesCore/each.html b/demos/samplesAppend/each.html → demos/samplesCore/each.html
diff --git a/demos/samplesAppendTo/parameters.html → demos/samplesCore/parameters.html b/demos/samplesAppendTo/parameters.html → demos/samplesCore/parameters.html
diff --git a/demos/samplesAppend/basic.html → demos/samplesTmplPlus/basic.html b/demos/samplesAppend/basic.html → 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 → demos/samplesTmplPlus/composition.html b/demos/samplesAppend/composition.html → 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 → demos/samplesTmplPlus/each.html b/demos/samplesAppendTo/each.html → 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 → demos/samplesTmplPlus/parameters.html b/demos/samplesAppend/parameters.html → 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")