jquery-tmpl.js vs handlebars.js - http://catchvar.com/jquery-tmpljs-vs-handlebarsjs

handlebars-example.js

	<!-- templates -->
	<script id="summary" type="text/x-handlebars-template">
		{{#users}}
			{{>summaryItem}}
		{{/users}}
	</script>
	
	<script id="summaryItem" class="partial" type="text/x-handlebars-template">
		<li id="user_{{id}}" class="summary_item">
				<p>{{name}}</p>
		</li>
	</script>
	
	<script id="details" type="text/x-handlebars-template">
			<li id="user_{{id}}" class="detail_item">
				<p>{{name}}</p>
				<p>level: {{level}}</p>
			</li>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "users": [{"id": "0", "name": "Justin", "level": "0" }, {"id": "1", "name": "Mark", "level": "2"}]};
	
		$(document).ready(function() {
			var 
				summary = Handlebars.compile( $("#summary").html() ),
				summaryItem = Handlebars.compile( $("#summaryItem").html() ),
				details = Handlebars.compile( $("#details").html() ) ;
				
			Handlebars.registerPartial("summaryItem", $("#summaryItem").html() );
			
			$("ul").append( summary(data) );
			$(document).delegate(".summary_item", "click", function() {
				var 
					attrId = $(this).attr("id"),
					id = attrId.substr(attrId.indexOf("_") + 1);
	
				$(this).replaceWith( details(data.users[id]) );
			})
			.delegate(".detail_item", "click", function() {
				var 
					attrId = $(this).attr("id"),
					id = attrId.substr(attrId.indexOf("_") + 1);
					
				$(this).replaceWith( summaryItem(data.users[id]) );
			});
		});
	</script>

handlebars-list-empty.js

	<!-- templates -->
	<script id="intro" type="text/x-handlebars-template">
		<ul>
			{{#users }}
				<li>Hello, {{ name }}</li>
			{{/users}}
			{{^users}}
				No Users
			{{/users}}
		</ul>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "users": []};
	
		$(document).ready(function() {
			var template = Handlebars.compile( $("#intro").html() );
			$("body").append(template(data));
		});
	</script>

handlebars-list.js

	<!-- templates -->
	<script id="intro" type="text/x-handlebars-template">
		<ul>
			{{#users }}
				<li>
					<p>Hello, {{ name }}</p>
					<p>You are level {{ level }} </p>
				</li>
			{{/users}}
		</ul>
	
	</script>
	<!-- code -->
	<script type="text/javascript">
		var data = { "users": [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}]};
		
		$(document).ready(function() {
		
			var template = Handlebars.compile( $("#intro").html() );
			$("body").append(template(data));
		});
	</script>

handlebars-store.js

	<!-- templates -->
	<script id="tmpl_store" type="text/x-handlebars-template">
		<ul>
			{{#products}}
				<li id="product_{{ id }}">
					<h2>{{ name }}</h2>
					<p>{{ description }}</p>
					<div>
						<span>{{ formatPrice this }}</span>
						<input type="submit" value="Add to cart" />
					</div>
				</li>
			{{/products}}
		</ul>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { 
			"products": [{
					"id": "0", 
					"name": "Ultralight Quickdraw set ", 
					"description": "Easy to use quickdraws", 
					"price": "13.0",
					"currency": "pound"
				}, {
					"id": "1", 
					"name": "Backpacking Tent", 
					"description": "Stay dry and light on your next backpacking trip",
					"price": "158",
					"currency": "euro"
				}
			]
		};
		
		Handlebars.registerHelper("formatPrice", function(product) {
			var 
				price,
				currency = {
					dollar: "$",
					euro: "\u20AC",
					pound: "\u00A3"
				};
				
			price = parseInt(product.price).toFixed(2);
			
			for (var key in currency) {
				if ( product.currency === key ) {
					return currency[key] + price;
				}
			}
			
			return "$" + price;
		});
	
		$(document).ready(function() {
			var 
				store = Handlebars.compile( $("#tmpl_store").html() );
			
			$("body").append( store(data) );
		});
	</script>

handlebars.js

	<!-- templates -->
	<script id="intro" type="text/x-handlebars-template">
		<p>
			Hello, {{ name }}
		</p>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "name": "Justin" };
	
		$(document).ready(function() {
			var template = Handlebars.compile($("#intro").html());
			$("body").append(template(data));
		});
	</script>

tmpl-example.js

	<!-- templates -->
	<script id="summary" type="text/x-jquery-tmpl">
		<li class="summary_item">
			<p>${name}</p>
		</li>
	</script>
	
	<script id="details" type="text/x-jquery-tmpl">
		<li class="detail_item">
			<p>${name}</p>
			<p>level: ${level}</p>
		</li>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}];
	
		$(document).ready(function() {
			$("#summary").template("summary");
			$("#details").template("details");
			$("ul").append($.tmpl("summary", data));
			
			$(document).delegate(".summary_item", "click", function() {
				var selectedItem = $.tmplItem(this);
				selectedItem.tmpl = $.template["details"];
				selectedItem.update();
			})
			.delegate(".detail_item", "click", function() {
				var selectedItem = $.tmplItem(this);
				selectedItem.tmpl = $.template["summary"];
				selectedItem.update();
			});
			
		});
	</script>

tmpl-list-empty.js

	<!-- templates -->
	<script id="intro" type="text/x-jquery-tmpl">
		<ul>
			{{if users.length }}
				{{each users }}
					<li>Hello, ${ name }</li>
				{{/each}}
			{{else}}
				No users
			{{/if}}
		</ul>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "users": []};
	
		$(document).ready(function() {
			$("#intro").template("intro");
			$("body").append($.tmpl("intro", data));
		});
	</script>

tmpl-list.js

	<!-- templates -->
	<script id="intro" type="text/x-jquery-tmpl">
		<ul>
			{{each users }}
				<li>
					<p>Hello, ${ name }</p>
					<p>You are level ${ level } </p>
				</li>
			{{/each}}
		</ul>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "users": [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}]};
	
		$(document).ready(function() {
		
			$("#intro").template("intro");
			$("body").append($.tmpl("intro", data));
		});
	</script>

tmpl-store.js

	<!-- templates -->
	<script id="tmpl_store" type="text/x-jquery-tmpl">
		<ul>
			{{each products}}
				<li id="product_{{ id }}">
					<h2>{{= name }}</h2>
					<p>{{= description }}</p>
					<div>
						<span>{{=  price }}</span>
						<input type="submit" value="Add to cart" />
					</div>
				</li>
			{{/each}}
		</ul>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { 
			"products": [{
					"id": "0", 
					"name": "Ultralight Quickdraw set ", 
					"description": "Easy to use quickdraws", 
					"price": "13.0",
					"currency": "euro"
				}, {
					"id": "1", 
					"name": "Backpacking Tent", 
					"description": "Stay dry and light on your next backpacking trip",
					"price": "158",
					"currency": "pound"
				}
			]
		};
	
		$(document).ready(function() {
			var i, len, product;
			
			// Alter JSON data before displaying template
			for ( i = 0; len = data.products.length, i < len; i++ ) {
				product = data.products[i];
				product.price = formatCurrency(product.price, product.currency);
			}
		
			// Display template
			$("#tmpl_store").template("details");
			$("body").append($.tmpl("details", data));
		});
		
		function formatCurrency(price, currency) {
			var 
				formattedPrice,
				currencyMap = {
					"dollar": "$",
					"euro": "\u20AC",
					"pound": "\u00A3"
				};
				
			formattedPrice = parseInt(price).toFixed(2);
			
			for (var key in currencyMap) {
				if ( currency === key ) {
					return currencyMap[key] + formattedPrice;
				}
			}
			
			return "$" + formattedPrice;
		}
	</script>

tmpl.js

	<!-- templates -->
	<script id="intro" type="text/x-jquery-tmpl">
		<p>
			Hello, ${ name }
		</p>
	</script>
	
	<!-- code -->
	<script type="text/javascript">
		var data = { "name": "Justin" };
	
		$(document).ready(function() {
			$("#intro").template("intro");
			$("body").append($.tmpl("intro", data));
		});
	</script>