Switched from jQuery-tmpl to handlebars.js

Since jQuery-tmpl is depricated

Switched from jQuery-tmpl to handlebars.js
Since jQuery-tmpl is depricated
e659901d · Sindre Sorhus · fb92c298 · e659901d · e659901d · e659901d
Commit e659901d authored Jan 02, 2012 by Sindre Sorhus
3 changed files
--- a/todo-example/jquery/index.html
+++ b/todo-example/jquery/index.html
 <!doctype html>
-<html>
+<html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>jQuery</title>
 	<link rel="stylesheet" href="css/app.css">
 	<script src="js/json2.js"></script>
 	<script src="js/jquery.min.js"></script>
-	<script src="js/jquery.tmpl.js"></script>
+	<script src="js/handlebars-1.0.0.beta.6.js"></script>
 	<script src="js/app.js"></script>
-	<script type="text/x-jquery-tmpl" id="todo-template">
-	<li class="item {{if done}}done{{/if}}" data-id="${id}">
-		<div class="view" title="Double click to edit...">
-			<input type="checkbox" {{if done}}checked="checked"{{/if}}> 
-			<span>${title}</span>
-			<a class="destroy"></a>
-		</div>
-		<div class="edit">
-			<input type="text" value="${title}">
-		</div>
-	</li>
-	</script>
 </head>
 <body>
 	<div id="todoapp">
@@ -32,11 +21,25 @@
 			<div class="count"></div>
 		</footer>
 	</div>
-	<div id='instructions'>
+	<div id="instructions">
 		Double-click to edit a todo.
 	</div>
 	<div id="credits">
 		Created by <a href="http://sindresorhus.com">Sindre Sorhus</a>.
 	</div>
+	<script type="text/x-handlebars-template" id="todo-template">
+	{{#this}}
+	<li class="item {{#if done}}done{{/if}}" data-id="{{id}}">
+		<div class="view" title="Double click to edit...">
+			<input type="checkbox" {{#if done}}checked="checked"{{/if}}>
+			<span>{{title}}</span>
+			<a class="destroy"></a>
+		</div>
+		<div class="edit">
+			<input type="text" value="{{title}}">
+		</div>
+	</li>
+	{{/this}}
+	</script>
 </body>
 </html>
\ No newline at end of file
--- a/todo-example/jquery/js/app.js
+++ b/todo-example/jquery/js/app.js
@@ -33,7 +33,7 @@ jQuery(function($) {
 			this.render();
 		},
 		cacheElements: function() {
-			this.$template = $('#todo-template');
+			this.template = Handlebars.compile( $('#todo-template').html() );
 			this.$todoApp = $('#todoapp');
 			this.$todoList = this.$todoApp.find('.items');
 			this.$footer = this.$todoApp.find('footer');
@@ -60,8 +60,7 @@ jQuery(function($) {
 			list.on( 'click', '.destroy', this.destroy );
 		},
 		render: function() {
-			var html = this.$template.tmpl( this.todos );
-			this.$todoList.html( html );
+			this.$todoList.html( this.template( this.todos ) );
 			this.renderFooter();
 			this.store( this.todos );
 		},

--- a/todo-example/jquery/js/handlebars-1.0.0.beta.6.js
+++ b/todo-example/jquery/js/handlebars-1.0.0.beta.6.js