sammyjs upgraded + bower.

labs/architecture-examples/sammyjs/component.json

+{
+	"name": "todomvc-sammyjs",
+	"version": "0.0.0",
+	"dependencies": {
+		"sammy": "~0.7.4",
+		"jquery": "~1.9.1",
+		"todomvc-common": "~0.1.2"
+	}
+}

labs/architecture-examples/sammyjs/js/lib/sammy.template.js → labs/architecture-examples/sammyjs/components/sammy/sammy.template.js

@@ -11,11 +11,6 @@
   // adapted from: http://ejohn.org/blog/javascript-micro-templating/
   // originally $.srender by Greg Borenstein http://ideasfordozens.com in Feb 2009
   // modified for Sammy by Aaron Quint for caching templates by name
-  // Backport of escapeHTML from sammy.js 0.7
-  var _escapeHTML = function(s) {
-    return String(s).replace(/&(?!\w+;)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-  };
-
   var srender_cache = {};
   var srender = function(name, template, data, options) {
     var fn, escaped_string;
@@ -137,7 +132,7 @@
       if (typeof options == 'undefined' && typeof name == 'object') {
         options = name; name = template;
       }
-      return srender(name, template, $.extend({h: _escapeHTML}, this, data), options);
+      return srender(name, template, $.extend({}, this, data), options);
     };
 
     // set the default method name/extension

labs/architecture-examples/sammyjs/components/todomvc-common/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: '✔';
+	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	word-break: break-word;
+	padding: 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
+}
+
+#clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+.hidden{
+	display:none;
+}

labs/architecture-examples/sammyjs/components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	if (location.hostname === 'todomvc.com') {
+		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+
+	function getSourcePath() {
+		// If accessed via addyosmani.github.com/todomvc/, strip the project
+		// path.
+		if (location.hostname.indexOf('github.com') > 0) {
+			return location.pathname.replace(/todomvc\//, '');
+		}
+		return location.pathname;
+	}
+
+	function appendSourceLink() {
+		var sourceLink = document.createElement('a');
+		var paragraph = document.createElement('p');
+		var footer = document.getElementById('info');
+		var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
+
+		if (footer) {
+			sourceLink.href = urlBase + getSourcePath();
+			sourceLink.appendChild(document.createTextNode('Check out the source'));
+			paragraph.appendChild(sourceLink);
+			footer.appendChild(paragraph);
+		}
+	}
+
+	function redirect() {
+		if (location.hostname === 'addyosmani.github.com') {
+			location.href = location.href.replace('addyosmani.github.com/todomvc',
+												  'todomvc.com');
+		}
+	}
+
+	appendSourceLink();
+	redirect();
+})();

labs/architecture-examples/sammyjs/index.html

 <!doctype html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<title>Sammy.js • TodoMVC</title>
-		<link rel="stylesheet" href="css/app.css">
-		<!--[if IE]>
-		<script src="../../../assets/ie.js"></script>
-		<![endif]-->
+		<link rel="stylesheet" href="components/todomvc-common/base.css">
 	</head>
 	<body>
-		<div id="todoapp">
-			<div class="title">
+		<section id="todoapp">
+			<header id="header">
 				<h1>todos</h1>
-			</div>
-			<div class="content">
-				<div id="create-todo">
-					<input id="new-todo" placeholder="What needs to be done?" type="text">
-				</div>
-				<div id="todos">
-					<ul id="todo-list"></ul>
-				</div>
-				<div id="todo-stats"></div>
-			</div>
-		</div>
-		<div id="credits">
-			This version by
-			<br />
-			<a href="http://twitter.com/addyosmani">Addy Osmani</a>
-			<br />
-			based on some code by Brandon Aaron
-		</div>
-		<script src="../../../assets/base.js"></script>
-		<script src="../../../assets/jquery.min.js"></script>
-		<script src="js/lib/sammy.js"></script>
-		<script src="js/lib/sammy.template.js"></script>
-		<script src="js/lib/model.js"></script>
+				<input id="new-todo" placeholder="What needs to be done?" autofocus>
+			</header>
+			<section id="main"></section>
+			<footer id="footer"></footer>
+		</section>
+		<footer id="info">
+			<p>Double-click to edit a todo</p>
+			<p>Written by <a href="https://github.com/stephenplusplus">Stephen Sawchuk</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script src="components/todomvc-common/base.js"></script>
+		<script src="components/jquery/jquery.js"></script>
+		<script src="components/sammy/sammy.js"></script>
+		<script src="components/sammy/sammy.template.js"></script>
 		<script src="js/app.js"></script>
+		<script src="js/controllers/TodoItem.js"></script>
+		<script src="js/controllers/TodoList.js"></script>
+		<script src="js/models/Todos.js"></script>
+		<script src="js/routes/active.js"></script>
+		<script src="js/routes/completed.js"></script>
+		<script src="js/routes/home.js"></script>
+		<script src="js/views/TodoItem.js"></script>
+		<script src="js/views/TodoList.js"></script>
 	</body>
-</html>
+</html>
\ No newline at end of file

labs/architecture-examples/sammyjs/js/app.js

-(function($) {
-	var ESCAPE_KEY = 13;
+/*global Sammy, jQuery, TodoApp */
 
-	var app = $.sammy(function() {
-		this.use(Sammy.Template);
+(function (window, $) {
+	'use strict';
 
-		this.notFound = function(verb, path) {
-			this.runRoute('get', '#/404');
-		};
-
-
-		this.get('#/404', function() {
-			this.partial('templates/404.template', {}, function(html) {
-				$('#todo-list').html(html);
-			});
-		});
-
-		this.get('#/list/:id', function() {
-			var list = Lists.get(this.params['id']);
-			if (list) {
-				this.partial('templates/todolist.template', {
-					list: list,
-					todos: Todos.filter('listId', list.id)
-				}, function(html) {
-					$('#todo-list').html(html);
-				});
-			} else {
-				this.notFound();
-			}
-		});
-
-
-		// events
-		this.bind('run', function(e, data) {
-			var context = this;
-
-			var title = localStorage.getItem('title') || "Todos";
-			$('h1').text(title);
-
-			if(Lists._data.length <=0){
-				var list = Lists.create({ name: 'My new list' });
-				//app.trigger('updateLists');
-			}
-
-			$('#new-todo').keydown(function(e) {
-				if (e.keyCode == ESCAPE_KEY){
-					var todoContent = $(this).val();
-					var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
-					context.partial('templates/todo.template', todo, function(html) {
-						$('#todo-list').append(html);
-
-					});
-					$(this).val('');
-
-				}
-			});
-
-
-
-
-			$('.trashcan')
-				.live('click', function() {
-					var $this  = $(this);
-					app.trigger('delete', {
-						type: $this.attr('data-type'),
-						id:   $this.attr('data-id')
-					});
-				});
-
-			//new
-
-		   $('.check')
-			   .live('click', function() {
-				   var $this  = $(this),
-					   $li	  = $this.parents('li').toggleClass('done'),
-					   isDone = $li.is('.done');
-				   app.trigger('mark' + (isDone ? 'Done' : 'Undone'), { id: $li.attr('data-id') });
-			});
-
-
-
-			$('[contenteditable]')
-				.live('focus', function() {
-					// store the current value
-					$.data(this, 'prevValue', $(this).text());
-				})
-				.live('blur', function() {
-					var $this = $(this),
-						// grab the, likely, modified value
-						text = $.trim($this.text());
-					if (!text) {
-						// restore the previous value if text is empty
-						$this.text($.data(this, 'prevValue'));
-					} else {
-						if ($this.is('h1')) {
-							// it is the title
-							localStorage.setItem('title', text);
-						} else {
-							// save it
-							app.trigger('save', {
-								type: $this.attr('data-type'),
-								id: $this.attr('data-id'),
-								name: text
-							});
-						}
-					}
-				})
-				.live('keypress', function(event) {
-					// save on enter
-					if (event.which === 13) {
-						this.blur();
-						return false;
-					}
-				});
-
-			if (!localStorage.getItem('initialized')) {
-				// create first list and todo
-				var listId = Lists.create({
-					name: 'My first list'
-				}).id;
-
-				/*
-				Todos.create({
-					name: 'My first todo',
-					done: false,
-					listId: listId
-				});
-				*/
-
-				localStorage.setItem('initialized', 'yup');
-				this.redirect('#/list/'+listId);
-			} else {
-				var lastViewedOrFirstList = localStorage.getItem('lastviewed') || '#/list/' + Lists.first().id;
-				this.redirect(lastViewedOrFirstList);
-			}
-
-		});
-
-		/*save the route as the lastviewed item*/
-		this.bind('route-found', function(e, data) {
-			localStorage.setItem('lastviewed', document.location.hash);
-		});
-
-		this.bind('save', function(e, data) {
-			var model = data.type == 'todo' ? Todos : Lists;
-			model.update(data.id, { name: data.name });
-
-		});
-
-		/*marking the selected item as done*/
-		this.bind('markDone', function(e, data) {
-			Todos.update(data.id, { done: true });
-		});
-
-		/*mark the todo with the selected id as not done*/
-		this.bind('markUndone', function(e, data) {
-			Todos.update(data.id, { done: false });
-		});
-
-		this.bind('delete', function(e, data) {
-			//if (confirm('Are you sure you want to delete this ' + data.type + '?')) {
-				var model = data.type == 'list' ? Lists : Todos;
-				model.destroy(data.id);
-
-				if (data.type == 'list') {
-					var list = Lists.first();
-					if (list) {
-						this.redirect('#/list/'+list.id);
-					} else {
-						// create first list and todo
-						var listId = Lists.create({
-							name: 'Initial list'
-						}).id;
-						Todos.create({
-							name: 'A sample todo item',
-							done: false,
-							listId: listId
-						});
-
-						this.redirect('#/list/'+listId);
-					}
-				} else {
-					// delete the todo from the view
-					$('li[data-id=' + data.id + ']').remove();
-				}
-		});
+	window.TodoApp = Sammy('#todoapp').use('Template');
 
+	TodoApp.notFound = function () {
+		this.runRoute('get', '#/');
+	};
 
+	$(function () {
+		TodoApp.run('#/');
 	});
-
-	// lists model
-	Lists = Object.create(Model);
-	Lists.name = 'lists-sammyjs';
-	Lists.init();
-
-	// todos model
-	Todos = Object.create(Model);
-	Todos.name = 'todos-sammyjs';
-	Todos.init();
-
-
-	$(function() { app.run(); });
-})(jQuery);
+})(window, jQuery);

labs/architecture-examples/sammyjs/js/controllers/TodoItem.js

+/*global jQuery, TodoApp */
+
+(function ($) {
+	'use strict';
+
+	var ESCAPE_KEY = 27;
+	var ENTER_KEY = 13;
+
+	var TodoItem = {
+		// `effectCause`
+		// i.e. "removeClick" = "a click to remove a todoItem"
+
+		removeClick: function () {
+			TodoApp.trigger('removeTodo', {
+				id: $(this).parents('li').data('id')
+			});
+		},
+
+		toggleClick: function () {
+			TodoApp.trigger('toggleTodoCompleted', {
+				id: $(this).parents('li').data('id')
+			});
+		},
+
+		editDblClick: function () {
+			$(this).parents('li').data('original-name', $(this).text());
+
+			TodoApp.trigger('editingTodo', {
+				id: $(this).parents('li').data('id')
+			});
+		},
+
+		editBlur: function () {
+			TodoApp.trigger('doneEditingTodo', {
+				id: $(this).parents('li').data('id'),
+				name: $.trim($(this).val())
+			});
+		},
+
+		editKeyup: function (e) {
+			if (e.which === ESCAPE_KEY) {
+				$(this).trigger('cancelEditingTodo', {
+					id: $(this).parents('li').data('id'),
+					name: $(this).parents('li').data('original-name')
+				});
+			}
+
+			if (e.which === ENTER_KEY) {
+				$(this).trigger('blur');
+			}
+		},
+
+		init: function () {
+			$('#todo-list')
+				.on('click', '.destroy', TodoItem.removeClick)
+				.on('click', '.toggle', TodoItem.toggleClick)
+				.on('dblclick', 'label', TodoItem.editDblClick)
+				.on('blur', '.edit', TodoItem.editBlur)
+				.on('keyup', '.edit', TodoItem.editKeyup);
+		}
+	};
+
+	TodoApp.bind('todoListRendered', TodoItem.init);
+})(jQuery);

labs/architecture-examples/sammyjs/js/controllers/TodoList.js

+/*global jQuery, TodoApp */
+
+(function ($) {
+	'use strict';
+
+	var ENTER_KEY = 13;
+
+	var TodoList = {
+		// `effectCause`
+		// i.e. "newKeydown" = "a keydown event to create a new Todo"
+
+		newKeydown: function (e) {
+			var name = $.trim($(this).val());
+
+			if (e.keyCode !== ENTER_KEY || !name) {
+				return;
+			}
+
+			TodoApp.trigger('saveTodo', {
+				name: name,
+				completed: false
+			});
+
+			$(this).val('');
+		},
+
+		toggleAllClick: (function () {
+			var flags = ['active', 'completed'];
+			var count = 1;
+
+			return function () {
+				TodoApp.trigger('toggleAllTodosCompleted', flags[count++ % 2]);
+			};
+		})(),
+
+		removeCompletedClick: function () {
+			TodoApp.trigger('removeCompletedTodos');
+		},
+
+		init: function () {
+			// The TodoApp has launched, let's bind our events.
+
+			$('#new-todo').on('keydown', TodoList.newKeydown);
+			$('#toggle-all').on('click', TodoList.toggleAllClick);
+			$('#footer').on('click', '#clear-completed', TodoList.removeCompletedClick);
+		}
+	};
+
+	TodoApp.bind('todoListRendered', TodoList.init);
+})(jQuery);

labs/architecture-examples/sammyjs/js/lib/model.js

-Model={name:"model",init:function(){this._id=0;this._data=[];this._deserialize();return this},create:function(a,b){a.id=this._newId();var c=this._data[this._data.push(a)-1];!1!==b&&this.save();return this._clone(c)},first:function(){return this._clone(this._data[0])},last:function(){return this._clone(_data[this._data.length-1])},get:function(a){return this._clone(this._get(a))},getAll:function(){return this._clone(this._data)},filter:function(a,b){return this._clone(this._filter(a,b))},multiFilter:function(){return this._clone(this._multiFilter(filter))},
-update:function(a,b,c){if(a=this._get(a)||!1)this._mixin(a,b),!1!==c&&this.save();return a},destroy:function(a,b){this._data.splice(this._indexOf(a),1);!1!==b&&this.save();return!0},destroyAll:function(a){this._data=[];!1!==a&&this.save();return!0},save:function(){this._serialize();return!0},_first:function(){return this._data[0]},_last:function(){return _data[this._data.length-1]},_get:function(a){return this._filter("id",a)[0]},_filter:function(a,b){var c=[],d,e,f="undefined"==typeof b;for(d in this._data)this._data.hasOwnProperty(d)&&
-(e=this._data[d],(f||e[a]==b)&&c.push(e));return c},_multiFilter:function(a){var b=[],c,d,e;for(c in this._data)if(this._data.hasOwnProperty(c))for(d in e=this._data[c],a)a.hasOwnProperty(d)&&a[d]==e[d]&&b.push(e);return b},_indexOf:function(a){return this._data.indexOf(this._get(a))},_serialize:function(){localStorage[this.name]=JSON.stringify({prevId:this._id,data:this._data})},_deserialize:function(){var a=localStorage[this.name];a&&(a=JSON.parse(a),this._id=a.prevId,this._data=a.data)},_newId:function(){return this._id++},
-_mixin:function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])},_clone:function(a){var b=Object.prototype.toString.call(a),c=a;if("[object Object]"==b){var c={},d;for(d in a)a.hasOwnProperty(d)&&(c[d]=this._clone(a[d]))}else if("[object Array]"==b){c=[];b=0;for(d=a.length;b<d;b++)c[b]=this._clone(a[b])}return c}};"function"!==typeof Object.create&&(Object.create=function(a){function b(){}b.prototype=a;return new b});
\ No newline at end of file

labs/architecture-examples/sammyjs/js/models/Todos.js

+/*global TodoApp */
+
+(function () {
+	'use strict';
+
+	var Todos = {
+		all: [],
+		visible: [],
+		flag: null,
+
+		createId: (function () {
+			// Creates a unique ID for every todoItem.
+			var s4 = function () {
+				return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+			};
+
+			return function () {
+				return s4() + s4();
+			};
+		})(),
+
+		findOne: function (param, value) {
+			var todo = {};
+
+			Todos.all.forEach(function (thisTodo, i) {
+				if (thisTodo[param] === value) {
+					todo.todo = thisTodo;
+					todo.index = i;
+				}
+			});
+
+			return todo;
+		},
+
+		filter: function (param, value) {
+			return Todos.all.filter(function (thisTodo) {
+				return thisTodo[param] === value;
+			});
+		},
+
+		get: function (id) {
+			if (id && id !== 'active' && id !== 'completed') {
+				// We are looking for a particular todoItem.
+				return Todos.findOne('id', id);
+			} else if (id === 'active' || id === 'completed') {
+				// We either want to receive only the completed or active todoItems.
+				return Todos.filter('completed', id === 'completed');
+			} else {
+				// We want all of the todoItems.
+				return JSON.parse(localStorage.getItem('todos-sammyjs')) || [];
+			}
+		},
+
+		getData: function () {
+			return {
+				flag: Todos.flag,
+				all: Todos.all,
+				active: Todos.get('active'),
+				completed: Todos.get('completed'),
+				visible: Todos.get(Todos.flag)
+			};
+		},
+
+		save: function (e, data) {
+			Todos.all.push({
+				id: Todos.createId(),
+				name: data.name,
+				completed: data.completed
+			});
+
+			Todos.sync();
+		},
+
+		toggleCompleted: function (e, data) {
+			Todos.get(data.id).todo.completed = !Todos.get(data.id).todo.completed;
+
+			TodoApp.trigger('toggledTodoCompleted', {
+				id: data.id,
+				completed: Todos.get(data.id).todo.completed
+			});
+
+			Todos.sync();
+		},
+
+		toggleAllCompleted: function () {
+			var activeTodosLeft = Todos.get('active').length > 0;
+
+			Todos.all.forEach(function (thisTodo) {
+				thisTodo.completed = activeTodosLeft;
+				TodoApp.trigger('toggledTodoCompleted', {
+					id: thisTodo.id,
+					completed: thisTodo.completed
+				});
+			});
+
+			Todos.sync();
+		},
+
+		edit: function (e, data) {
+			if (!data.name) {
+				return Todos.remove(e, data);
+			}
+
+			Todos.get(data.id).todo.name = data.name;
+
+			Todos.syncQuiet();
+		},
+
+		removeCompleted: function () {
+			Todos.get('completed').forEach(function (thisTodo) {
+				Todos.remove(null, thisTodo);
+			});
+		},
+
+		remove: function (e, data) {
+			Todos.all.splice(Todos.get(data.id).index, 1);
+
+			Todos.sync();
+		},
+
+		fetchTodos: function (e, flag) {
+			// Called from each route's instantiation.
+			Todos.all = Todos.get();
+
+			Todos.flag = flag;
+
+			TodoApp.trigger('launch', Todos.getData());
+
+			Todos.sync();
+		},
+
+		syncQuiet: function () {
+			// Syncs data with `localStorage`, without forcing all of the todoItems
+			// to repaint.
+			localStorage.setItem('todos-sammyjs', JSON.stringify(Todos.all));
+
+			TodoApp.trigger('todosUpdatedQuiet', Todos.getData());
+		},
+
+		sync: function () {
+			// Syncs data with `localStorage`, and rebuilds the todoItems.
+			Todos.syncQuiet();
+
+			TodoApp.trigger('todosUpdated', Todos.getData());
+		}
+	};
+
+	TodoApp
+		.bind('fetchTodos', Todos.fetchTodos)
+		.bind('saveTodo', Todos.save)
+		.bind('doneEditingTodo', Todos.edit)
+		.bind('toggleTodoCompleted', Todos.toggleCompleted)
+		.bind('removeTodo', Todos.remove)
+		.bind('toggleAllTodosCompleted', Todos.toggleAllCompleted)
+		.bind('removeCompletedTodos', Todos.removeCompleted);
+})();

labs/architecture-examples/sammyjs/js/routes/active.js

+/*global TodoApp */
+
+(function () {
+	'use strict';
+
+	TodoApp.route('get', '#/active', function () {
+		TodoApp.trigger('fetchTodos', 'active');
+	});
+})();

labs/architecture-examples/sammyjs/js/routes/completed.js

+/*global TodoApp */
+
+(function () {
+	'use strict';
+
+	TodoApp.route('get', '#/completed', function () {
+		TodoApp.trigger('fetchTodos', 'completed');
+	});
+})();

labs/architecture-examples/sammyjs/js/routes/home.js

+/*global TodoApp */
+
+(function () {
+	'use strict';
+
+	TodoApp.route('get', '#/', function () {
+		TodoApp.trigger('fetchTodos');
+	});
+})();

labs/architecture-examples/sammyjs/js/views/TodoItem.js

+/*global jQuery, TodoApp */
+
+(function ($) {
+	'use strict';
+
+	var TodoItem = {
+		renderAllTodos: function (e, data) {
+			this.renderEach('templates/todoItem.template', data.visible).then(function () {
+				$('#todo-list').html(this.content);
+
+				TodoApp.trigger('todoItemsRendered', data);
+			});
+		},
+
+		toggleCompleteClass: function (e, data) {
+			if (data.completed) {
+				$('[data-id="' + data.id + '"]').addClass('completed');
+			} else {
+				$('[data-id="' + data.id + '"]').removeClass('completed');
+			}
+		},
+
+		editingTodo: function (e, data) {
+			var todo = $('[data-id="' + data.id + '"]');
+
+			todo.addClass('editing');
+
+			todo.find('.edit').focus().val(todo.find('.edit').val());
+		},
+
+		doneEditingTodo: function (e, data) {
+			var todo = $('[data-id="' + data.id + '"]');
+
+			todo.removeClass('editing');
+
+			if (data.name) {
+				todo.find('label').text(data.name);
+				todo.find('.edit').val(data.name);
+			}
+		}
+	};
+
+	TodoApp.bind('todosUpdated', TodoItem.renderAllTodos);
+
+	TodoApp.bind('toggleAllTodosCompleted', TodoItem.toggleCompleteClass);
+	TodoApp.bind('toggledTodoCompleted', TodoItem.toggleCompleteClass);
+
+	TodoApp.bind('editingTodo', TodoItem.editingTodo);
+	TodoApp.bind('cancelEditingTodo', TodoItem.doneEditingTodo);
+	TodoApp.bind('doneEditingTodo', TodoItem.doneEditingTodo);
+})(jQuery);

labs/architecture-examples/sammyjs/js/views/TodoList.js

+/*global jQuery, TodoApp */
+
+(function ($) {
+	'use strict';
+
+	var TodoList = {
+		elem: {
+			todoapp: '#todoapp',
+			main: '#main',
+			footer: '#footer'
+		},
+
+		render: function () {
+			TodoList.elem.todoapp = $(TodoList.elem.todoapp);
+			TodoList.elem.main = $(TodoList.elem.main);
+			TodoList.elem.footer = $(TodoList.elem.footer);
+
+			this.render('templates/todos.template').then(function () {
+				TodoList.elem.main.html(this.content);
+
+				TodoApp.trigger('todoListRendered');
+			});
+		},
+
+		refreshStats: function (e, data) {
+			var todoData = {
+				itemsLeft: data.active.length || 0,
+				completedCount: data.completed.length || 0,
+				flag: data.flag || ''
+			};
+
+			// Toggles the `#toggle-all` checkbox if all items are completed.
+			$('#toggle-all').prop('checked', data.completed.length === data.all.length ? 'checked' : false);
+
+			// Hides '#main' and '#footer' unless there are todoItems.
+			TodoList.elem.main.toggle(data.all.length > 0);
+			TodoList.elem.footer.toggle(data.all.length > 0);
+
+			this.render('templates/footer.template', todoData).then(function () {
+				TodoList.elem.footer.html(this.content);
+			});
+		}
+	};
+
+	TodoApp.bind('launch', TodoList.render);
+
+	TodoApp.bind('todoItemsRendered', TodoList.refreshStats);
+})(jQuery);

labs/architecture-examples/sammyjs/readme.md

 # Sammy.js TodoMVC app
 
-[Brandon Aaron](http://brandonaaron.net) wrote the original version of this application, which was then refactored and rewritten by Addy Osmani.
+[Brandon Aaron](http://brandonaaron.net) wrote the original version of this application, which was then refactored and rewritten by [Addy Osmani](https://github.com/addyosmani), followed by a complete rewrite and upgrade by [Stephen Sawchuk](https://github.com/stephenplusplus).
\ No newline at end of file

labs/architecture-examples/sammyjs/templates/404.template

-There was an error.
\ No newline at end of file

labs/architecture-examples/sammyjs/templates/footer.template

+<span id="todo-count">
+	<strong><%= itemsLeft %></strong> <%= itemsLeft == 0 || itemsLeft > 1 ? 'items' : 'item' %> left
+</span>
+<ul id="filters">
+	<li>
+		<a <%= flag === '' ? 'class=selected' : '' %> href="#/">All</a>
+	</li>
+	<li>
+		<a <%= flag === 'active' ? 'class=selected' : '' %> href="#/active">Active</a>
+	</li>
+	<li>
+		<a <%= flag === 'completed' ? 'class=selected' : '' %> href="#/completed">Completed</a>
+	</li>
+</ul>
+<button id="clear-completed" <%= completedCount === 0 ? 'class=hidden' : '' %>>Clear completed (<%= completedCount %>)</button>

labs/architecture-examples/sammyjs/templates/lists.template

-
-

labs/architecture-examples/sammyjs/templates/todo.template

-<li data-type="todo" data-id="<%= id %>" class="<%= done ? 'done' : '' %>">
-<div class="todo">
-	<div class="display">
-		<input class="check" type="checkbox" <%= done ? 'checked' : '' %>/>
-		<span class="trashcan" data-type="todo" data-id="<%= id %>"></span>
-		<span contenteditable="true" data-type="todo" data-id="<%= id %>" class="todo-item"><%= name %></span>
-	</div>
-</div>
-</li>

labs/architecture-examples/sammyjs/templates/todoItem.template

+<li data-id="<%= id %>" class="<%= completed ? 'completed' : '' %>">
+	<div class="view">
+		<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
+		<label><%= name %></label>
+		<button class="destroy"></button>
+	</div>
+	<input class="edit" value="<%= name %>">
+</li>

labs/architecture-examples/sammyjs/templates/todolist.template

-<h2 data-type="list" data-id="<%= list.id %>"></h2>
-    <% $.each(todos, function(index, todo) { %>
-      <li data-type="todo" data-id="<%= todo.id %>" class="<%= todo.done ? 'done' : '' %>">
-<div class="todo">
-	<div class="display">
-<input class="check" type="checkbox" <%= todo.done ? 'checked' : '' %>/>
-<span class="trashcan" data-type="todo" data-id="<%= todo.id %>"></span><span contenteditable="true" data-type="todo" data-id="<%= todo.id %>" class="todo-item"><%= todo.name %></span>
-</div>
-</div>
-</li>
-    <% }); %>
-
-
-
-
-
-

labs/architecture-examples/sammyjs/templates/todos.template

+<input id="toggle-all" type="checkbox">
+<label for="toggle-all">Mark all as complete</label>
+<ul id="todo-list"></ul>