Merge remote-tracking branch 'upstream/master'

Conflicts:
	todo-example/dojo/index.html

CNAME

+todomvc.com
\ No newline at end of file

README.md

-##TodoMVC - A common demo application for popular JavaScript MVC frameworks (0.2)
+# TodoMVC
 
-##Introduction
+#### A common learning application for popular JavaScript MV* frameworks
 
-Developers these days are spoiled with choice when it comes to selecting an MVC framework for structuring and organizing JavaScript web apps. Backbone, Spine, SproutCore, JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?
 
-To help solve this problem, I created TodoMVC - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks of today. Solutions look and feel the same, have a common feature set, and make it easy for you to compare the syntax and structure of different frameworks, so you can select the one you feel the most comfortable with.
+## Introduction
 
-####Todo apps are included for:
+Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js, AngularJS, JavaScriptMVC... The list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?
 
-<ul>
-<li>SproutCore 2.0</li>
-<li>Backbone.js</li>
-<li>Spine.js</li>
-<li>JavaScriptMVC</li>
-<li>Sammy.js</li>
-<li>YUILibrary</li>
-<li>KnockoutJS (MVVM)</li>
-<li>AngularJS</li>
-<li>Broke.js</li>
-<li>Fidel.js</li>
-<li>ExtJS</li>
-</ul>
+To help solve this problem, TodoMVC was created - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common feature set, and make it easy for you to compare the syntax and structure of different frameworks, so you can select the one you feel the most comfortable with.
 
-A jQuery-only version of the application is also included so you can easily see how the app can be implemented with and without a structural pattern like MVC.
 
+#### Todo apps are included for:
 
-##Screenshots:
+- [Backbone.js](http://documentcloud.github.com/backbone/)
+- [Backbone.js + RequireJS](http://requirejs.org/) (using AMD)
+- [Ember.js](http://emberjs.com/)
+- [JavaScriptMVC](http://javascriptmvc.com/)
+- [Spine.js](http://spinejs.com/)
+- [Sammy.js](http://sammyjs.org/)
+- [KnockoutJS](http://knockoutjs.com/) (MVVM)
+- [Knockback.js](http://kmalakoff.github.com/knockback/)
+- [Dojo](http://dojotoolkit.org/)
+- [Closure](http://code.google.com/closure/library/)
+- [YUILibrary](http://yuilibrary.com/)
+- [AngularJS](http://angularjs.org/)
+- [Angular + PersistenceJS](http://persistencejs.org/)
+- [Ext.js](http://www.sencha.com/products/extjs)
+- [Agility.js](http://agilityjs.com/)
 
-Preview of some of the apps included:
+###### Non MV*
 
-<img width="90%" src='http://www.blarnee.com/images/scr342342.jpg'/>
+- jQuery
+- Vanilla JS
 
-##Official site & Getting Involved
+We also have a number of in-progress applications for new frameworks (such as [CanJS](http://canjs.us/) and [Meteor](http://meteor.com/)) being worked on in our [Labs](http://addyosmani.github.com/todomvc/labs) site. 
 
-For live previews of Todo apps and more information on the project, see the official TodoMVC site here: [http://addyosmani.github.com/todomvc/](http://addyosmani.github.com/todomvc/)
+## Live demos
 
+Live demos are available on the official [TodoMVC site](http://todomvc.com).
 
 
+## Screenshot
+
+![screenshot](https://raw.github.com/addyosmani/todomvc/master/screenshot.png)
+
+
+## Team
+
+TodoMVC would not be possible without a strong team of [contributors](https://github.com/addyosmani/todomvc/contributors) helping push the project forward each day. In addition, we have a core project team composed of:
+
+* [Addy Osmani - Founder/Lead](http://github.com/addyosmani): Addy is a Developer Platform Engineer at Google who originally created TodoMVC. He oversees the project direction, drives expansion and helps lead core development with Sindre Sorhus (by far our most active contributor!).
+
+* [Sindre Sorhus - Lead Developer](https://github.com/sindresorhus): Sindre is a Web Developer who drives core development, quality control and application design for the project. His contributions have helped us ensure consistency and best practices are enforced wherever possible. 
+
+* [Aaron Boushley - on leave](https://github.com/boushley): Aaron is a JavaScript developer with a keen interest in architectural frameworks and has helped both standardize existing examples and improve the project as we worked on expansion. He is currently taking a break from his open-source contributions at this time.
+
+
+## Disclaimer
+
+TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of MV* frameworks. Whilst we hope that this project is able to offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of what a framework may be capable of.
+
+It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured and we heavily recommend investing time researching a solution in more depth before opting to use it.
+
+
+## Getting Involved
+
+Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.
+
+If you have an implementation you would like to show us or a patch you would like to send upstream, please feel free to send through a pull request after reading our [contribution guidelines](https://github.com/addyosmani/todomvc/wiki) (in particular our [application specifications](https://github.com/addyosmani/todomvc/wiki/App-Specification)). One of us will be happy to review your submission and discuss any changes that may be required before they can be included.
+
+Note that due to the current number of MVC/MVVM/MV* frameworks in circulation at the moment, it's not always possible to include each one in TodoMVC, but we'll definitely discuss the merits of any framework prior to making a decision. We hope you understand :)
+
+
+## License
+
+Public Domain
\ No newline at end of file

architecture-examples/agilityjs/index.html

+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Agility.js • TodoMVC</title>
+	<link rel="stylesheet" href="../../assets/base.css">
+	<!--[if IE]>
+	<script src="../../assets/ie.js"></script>
+	<![endif]-->
+</head>
+<body>
+	<section id="todoapp">
+		<header id="header">
+			<h1>todos</h1>
+			<input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
+		</header>
+		<section id="main" data-bind="class = mainStyle">
+			<input id="toggle-all" type="checkbox">
+			<label for="toggle-all">Mark all as completed</label>
+			<ul id="todo-list">
+				<li>
+					<div class="view">
+						<input class="toggle" type="checkbox" data-bind="completed">
+						<label data-bind="title"></label>
+						<button class="destroy"></button>
+					</div>
+					<input class="edit" type="text" data-bind="title">
+				</li>
+			</ul>
+		</section>
+		<footer id="footer" data-bind="class = mainStyle">
+		<span id="todo-count"><strong data-bind='todoCount'></strong> item<span data-bind='pluralizer'></span> left</span>
+			<ul id="filters">
+				<li>
+					<a class="selected" href="#/">All</a>
+				</li>
+				<li>
+					<a href="#/active">Active</a>
+				</li>
+				<li>
+					<a href="#/completed">Completed</a>
+				</li>
+			</ul>
+			<button id="clear-completed" data-bind="class = clearBtnStyle">Clear completed (<span data-bind="completedCount"></span>)</button>
+		</footer>
+	</section>
+	<footer id="info">
+		<p>Double-click to edit a todo</p>
+		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
+		<p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
+	</footer>
+	<script src="../../assets/base.js"></script>
+	<script src="../../assets/jquery.min.js"></script>
+	<script src="js/lib/agility.min.js"></script>
+	<script src="js/localstorage.js"></script>
+	<script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file

architecture-examples/agilityjs/js/app.js

+(function( $, $$ ) {
+	'use strict';
+	var ENTER_KEY = 13;
+
+	// Hack of taking out html elements from DOM so that agility's view can use it.
+	// We need 'outerhtml' also, as agilityjs will append DOM, so removing it.
+	var drawHtml = function( selector ) {
+		return $(selector).remove().wrap('<div>').parent().html();
+	};
+
+	// Simple Two layer composition:
+	// individual 'todoitem' and 'app'lication which holds multiple todoitems.
+	$(function() {
+		// todo item
+		var todoitem = $$({
+			model: {
+				title: '',
+				completed: false
+			},
+			view: {
+				format: drawHtml('#todo-list li'),
+				style: '.hidden { display: none }'
+			},
+			controller: {
+				'change:completed': function() {
+					this.view.$().toggleClass( 'completed', this.model.get('completed') );
+					app.updateStatus();
+				},
+				'dblclick .view': function() {
+					this.view.$().addClass('editing');
+					this.view.$('.edit').select();
+				},
+				'click .destroy': function() {
+					this.destroy();
+				},
+				'create': function() {
+					this.view.$().toggleClass( 'completed', this.model.get('completed') );
+				},
+				'change': function() {
+					this.save();
+				},
+				'destroy': function() {
+					this.erase();
+				},
+				'change:title': function() {
+					this.view.$().removeClass('editing');
+					var title = this.model.get('title').trim();
+					if ( title ) {
+						this.model.set({
+							title: title
+						});
+					} else {
+						this.destroy();
+					}
+				}
+			}
+		}).persist( $$.adapter.localStorage, {
+			collection: 'todos-agilityjs'
+		});
+
+		// The main application which holds todo items.
+		var app = $$({
+			model: {
+				todoCount: '0',
+				pluralizer: '',
+				completedCount: '0',
+				newtitle: '',
+				mainStyle: '',
+				clearBtnStyle: ''
+			},
+			view: {
+				format: drawHtml('#todoapp'),
+				style: '.hidden { display: none }'
+			},
+			controller: {
+				'remove': function() {
+					this.updateStatus();
+				},
+				'append': function() {
+					this.updateStatus();
+				},
+				'keyup #new-todo': function( event ) {
+					var title = $('#new-todo').val().trim();
+					if ( event.which === ENTER_KEY && title ) {
+						var item = $$( todoitem, {
+							title: title
+						}).save();
+						this.append( item, '#todo-list' );
+						event.target.value = '';  // clear input field
+					}
+				},
+				'click #toggle-all': function() {
+					var ischecked = this.view.$('#toggle-all').prop('checked');
+					this.each(function( id, item ) {
+						item.model.set({
+							completed: ischecked
+						});
+					});
+				},
+				'click #clear-completed': function() {
+					this.each(function( id, item ) {
+						if ( item.model.get('completed') ) {
+							item.destroy();
+						}
+					});
+				}
+			},
+			// utility functions
+			updateStatus: function() {
+				// update counts
+				var count = this.size(),
+					completedCount = 0;
+				this.each(function( id, item ) {
+					if ( item.model.get('completed') ) {
+						completedCount++;
+					}
+				});
+				this.model.set({
+					todoCount: count - completedCount + '',
+					pluralizer: (count > 1 ? 's' : ''),
+					completedCount: completedCount + '',
+					mainStyle: (count === 0 ? 'hidden' : ''),
+					clearBtnStyle: (completedCount === 0 ? 'hidden' : '')
+				});
+				// update toggle-all checked status
+				$('#toggle-all').prop( 'checked', completedCount === count );
+			},
+			// filter handler
+			filters: {
+				'#/': function( item ) {
+					return true;
+				},
+				'#/active': function( item ) {
+					return !item.model.get('completed');
+				},
+				'#/completed': function( item ) {
+					return item.model.get('completed');
+				}
+			},
+			applyFilter: function( hash ) {
+				var isVisible = this.filters[hash];
+				this.each(function( id, item ) {
+					item.view.$().toggleClass( 'hidden', !isVisible( item ) );
+				});
+			}
+		}).persist();
+		$$.document.prepend( app );
+
+		// load from localStorage
+		app.gather( todoitem, 'append', '#todo-list' ).updateStatus();
+
+		// manual routing  (not supported by agilityjs)
+		$(window).on( 'hashchange', function() {
+			var hash = location.hash;
+			app.applyFilter( hash );
+			$('#filters a').each(function() {
+				if ( hash === $(this).attr('href') ) {
+					$(this).addClass('selected');
+				} else {
+					$(this).removeClass('selected');
+				}
+			});
+		} );
+		if ( location.hash ) {
+			$(window).trigger('hashchange');
+		}
+	});
+
+})( window.jQuery, window.agility );

architecture-examples/agilityjs/js/localstorage.js

+// custom agilityjs adapter for localstorage
+(function( $$, undefined ) {
+	'use strict';
+
+	$$.adapter.localStorage = function( _params ) {
+		var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection,
+			storageStr = localStorage[storageKey],
+			items = (storageStr ? JSON.parse( storageStr ) : {});
+		//
+		if ( _params.type === 'GET' ) {
+			if ( _params.id !== undefined ) {  // normal get
+				if ( typeof items[_params.id] === 'object' ) {
+					_params.success( items[_params.id] );
+				} else {
+					_params.error();
+				}
+			} else {  // gather call
+				_params.success( items );
+			}
+		} else if ( _params.type === 'DELETE' ) {
+			delete items[_params.id];
+			localStorage[storageKey] = JSON.stringify( items );
+		} else if ( _params.type === 'PUT' || _params.type === 'POST' ) {
+			if ( _params.id === undefined ) {
+				_params.id = (new Date()).getTime();
+				_params.data.id = _params.id;
+			}
+			items[_params.id] = _params.data;
+			localStorage[storageKey] = JSON.stringify( items );
+		} else {
+			_params.error();
+		}
+		_params.complete();
+	};
+
+})( window.agility );

architecture-examples/angularjs/css/app.css

+/*this doesn't seem to be used in the jquery example at all. Its getting in the way */
+#todo-count span {
+	font-weight: inherit;
+}
\ No newline at end of file

architecture-examples/angularjs/css/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eeeeee;
+	color: #333333;
+	width: 520px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+}
+
+#todoapp {
+	background: #fff;
+	padding: 20px;
+	margin-bottom: 40px;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-webkit-border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-ms-border-radius: 0 0 5px 5px;
+	-o-border-radius: 0 0 5px 5px;
+	border-radius: 0 0 5px 5px;
+}
+
+#todoapp h1 {
+	font-size: 36px;
+	font-weight: bold;
+	text-align: center;
+	padding: 0 0 10px 0;
+}
+
+#todoapp input[type="text"] {
+	width: 466px;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	padding: 6px;
+	border: 1px solid #999999;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todo-list {
+	margin: 10px 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	padding: 18px 20px 18px 0;
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #cccccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.done label {
+	color: #777777;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 20px;
+	right: 10px;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	margin-top: -1px;
+	padding: 0;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 444px;
+	padding: 13px 15px 14px 20px;
+	margin: 0;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .view label {
+	word-break: break-word;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todoapp footer {
+	margin: 0 -20px -20px -20px;
+	overflow: hidden;
+	color: #555555;
+	background: #f4fce8;
+	border-top: 1px solid #ededed;
+	padding: 0 20px;
+	line-height: 37px;
+	-webkit-border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-ms-border-radius: 0 0 5px 5px;
+	-o-border-radius: 0 0 5px 5px;
+	border-radius: 0 0 5px 5px;
+}
+
+#clear-completed {
+	float: right;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	color: #555555;
+	font-size: 11px;
+	margin-top: 8px;
+	margin-bottom: 8px;
+	padding: 0 10px 1px;
+	cursor: pointer;
+	-webkit-border-radius: 12px;
+	-moz-border-radius: 12px;
+	-ms-border-radius: 12px;
+	-o-border-radius: 12px;
+	border-radius: 12px;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
+#clear-completed:active {
+	position: relative;
+	top: 1px;
+}
+
+#todo-count span {
+	font-weight: bold;
+}
+
+#instructions {
+	margin: 10px auto;
+	color: #777777;
+	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+	text-align: center;
+}
+
+#instructions a {
+	color: #336699;
+}
+
+#credits {
+	margin: 30px auto;
+	color: #999;
+	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+	text-align: center;
+}
+
+#credits a {
+	color: #888;
+}
\ No newline at end of file

architecture-examples/angularjs/index.html

+<!doctype html>
+<html ng-app="todomvc">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS - TodoMVC</title>
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/app.css">
+  <!--[if IE]>
+  <script src="../../assets/ie.js"></script>
+  <![endif]-->
+</head>
+<body>
+  <div ng-controller="App.Controllers.TodoController" id="todoapp">
+    <header>
+      <h1>Todos</h1>
+      <form id="todo-form" ng-submit="addTodo()">
+        <input type="text" id="new-todo" name="newTodo" ng-model="newTodo" placeholder="What needs to be done?">
+      </form>
+    </header>
+    <section id="main" ng-show="todos.length">
+      <input type="checkbox" id="toggle-all" ng-click="markAllDone()" ng-checked="remainingTodos().length == 0">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul id="todo-list">
+        <li ng-repeat="todo in todos" ng-dblclick="editTodo(todo)" ng-class="{done: todo.done, editing: todo.editing}">
+          <div class="view">
+            <input type="checkbox" class="toggle" name="todo.done" ng-model="todo.done">
+            <label>{{todo.title}}</label>
+            <a class="destroy" ng-click="removeTodo(todo)"></a>
+          </div>
+          <form ng-submit="finishEditing(todo)">
+            <input type="text" class="edit" name="todo.title" ng-model="todo.title" my:blur="finishEditing(todo)">
+          </form>
+        </li>
+      </ul>
+    </section>
+    <footer ng-show="todos.length">
+      <a id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneTodos().length">Clear {{doneTodos().length}} items</a>
+      <div id="todo-count">
+        <ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
+      </div>
+    </footer>
+  </div>
+  <div id="instructions">
+    Double-click to edit a todo.
+  </div>
+  <div id="credits">
+    Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
+  </div>
+  <script src="../../assets/base.js"></script>
+  <script src="js/booter.js"></script>
+  <script src="js/libs/angular/angular.min.js"></script>
+  <script src="js/controllers.js"></script>
+</body>
+</html>
\ No newline at end of file

architecture-examples/angularjs/js/controllers.js

+/* App Controllers */
+
+var todomvc = angular.module('todomvc', []);
+
+App.Controllers.TodoController = function($scope) {
+  $scope.todos = retrieveStore();
+
+  // Call updateStore() whenever the todos array changes.
+  $scope.$watch('todos', updateStore, true);
+
+  $scope.todoForms = {
+    0: "You're done!",
+    one: '{} item left',
+    other: '{} items left'
+  };
+
+  function retrieveStore() {
+    var store = localStorage.getItem('todo-angularjs');
+    return (store && JSON.parse(store)) || [];
+  };
+
+  function updateStore() {
+    var isEditing = $scope.todos.filter(function(val) {
+      return val.editing;
+    }).length;
+
+    if (!isEditing) {
+      localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
+    }
+  };
+
+  $scope.addTodo = function() {
+    if (this.newTodo.trim().length === 0) {
+      return;
+    }
+
+    $scope.todos.push({
+      title: this.newTodo,
+      done: false,
+      editing: false
+    });
+
+    this.newTodo = '';
+  };
+
+  $scope.editTodo = function(todo) {
+     //cancel any active editing operation
+    $scope.todos.forEach(function(val) {
+      val.editing = false;
+    });
+    todo.editing = true;
+  };
+
+  $scope.finishEditing = function(todo) {
+    if (todo.title.trim().length === 0) {
+      $scope.removeTodo(todo);
+    } else {
+      todo.editing = false;
+    }
+  };
+
+  $scope.removeTodo = function(todo) {
+    for (var i = 0, len = $scope.todos.length; i < len; ++i) {
+      if (todo === $scope.todos[i]) {
+        $scope.todos.splice(i, 1);
+      }
+    }
+  };
+
+  $scope.remainingTodos = function() {
+    return $scope.todos.filter(function(val) {
+      return !val.done;
+    });
+  };
+
+  $scope.doneTodos = function() {
+    return $scope.todos.filter(function(val) {
+      return val.done;
+    });
+  }
+
+  $scope.clearDoneTodos = function() {
+    $scope.todos = $scope.remainingTodos();
+  };
+
+  $scope.markAllDone = function() {
+    var markDone = true;
+    if (!$scope.remainingTodos().length) {
+      markDone = false;
+    }
+    $scope.todos.forEach(function(todo) {
+      todo.done = markDone;
+    });
+  };
+};

architecture-examples/angularjs_persistencejs/css/app.css

+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+ol, ul {
+  list-style: none;
+}
+a img {
+  border: none;
+}
+
+html {
+  background: #eeeeee;
+}
+  body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.4em;
+    background: #eeeeee;
+    color: #333333;
+  }
+
+.clickable{
+  cursor:pointer;
+}
+
+#todoapp {
+    background: none repeat scroll 0 0 white;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    background: none repeat scroll 0 0 white;
+    margin: 0 auto 40px;
+    padding: 20px;
+    width: 480px;
+}
+
+#todoapp {
+  width: 480px;
+  margin: 0 auto 40px;
+  background: white;
+  padding: 20px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
+}
+  #todoapp h1 {
+    font-size: 36px;
+    font-weight: bold;
+    text-align: center;
+    padding: 20px 0 30px 0;
+    line-height: 1;
+  }
+
+#create-todo {
+  position: relative;
+}
+  #todo-form input {
+    width: 466px;
+    font-size: 24px;
+    font-family: inherit;
+    line-height: 1.4em;
+    border: 0;
+    outline: none;
+    padding: 6px;
+    border: 1px solid #999999;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  }
+    #create-todo input::-webkit-input-placeholder {
+      font-style: italic;
+    }
+  #create-todo span {
+    position: absolute;
+    z-index: 999;
+    width: 170px;
+    left: 50%;
+    margin-left: -85px;
+  }
+
+#todo-list {
+  margin-top: 10px;
+}
+  #todo-list li {
+    padding: 12px 20px 11px 0;
+    position: relative;
+    font-size: 24px;
+    line-height: 1.1em;
+    border-bottom: 1px solid #cccccc;
+  }
+    #todo-list li:after {
+      content: "\0020";
+      display: block;
+      height: 0;
+      clear: both;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    #todo-list li.editing-true {
+      padding: 0;
+      border-bottom: 0;
+    }
+  #todo-list .editing-true .display,
+  #todo-list .edit {
+    display: none;
+  }
+    #todo-list .editing-true .edit {
+      display: block;
+    }
+    #todo-list .editing-true input {
+      width: 444px;
+      font-size: 24px;
+      font-family: inherit;
+      margin: 0;
+      line-height: 1.6em;
+      border: 0;
+      outline: none;
+      padding: 10px 7px 0px 27px;
+      border: 1px solid #999999;
+      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+      -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+    }
+  #todo-list .check {
+    position: relative;
+    top: 9px;
+    margin: 0 10px 0 7px;
+    float: left;
+  }
+  #todo-list .done-true .todo-content {
+    text-decoration: line-through;
+    color: #777777;
+  }
+  #todo-list .todo-destroy {
+    position: absolute;
+    right: 5px;
+    top: 14px;
+    display: none;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    background: url(../img/destroy.png) no-repeat 0 0;
+  }
+    #todo-list li:hover .todo-destroy {
+      display: block;
+    }
+    #todo-list .todo-destroy:hover {
+      background-position: 0 -20px;
+    }
+
+#todo-stats {
+  *zoom: 1;
+  margin-top: 10px;
+  color: #777777;
+  
+  background: none repeat scroll 0 0 #F4FCE8;
+    border-radius: 0 0 5px 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    display: block;
+    line-height: 36px;
+    margin: 20px -20px -20px;
+    overflow: hidden;
+    padding: 0 20px;
+}
+
+
+    
+  #todo-stats:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+  #todo-stats .todo-count {
+    float: left;
+  }
+    #todo-stats .todo-count .number {
+      font-weight: bold;
+      color: #333333;
+    }
+  #todo-stats .todo-clear {
+    float: right;
+  }
+  
+  #todoapp #todo-stats {
+    background: none repeat scroll 0 0 #F4FCE8;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    line-height: 36px;
+    margin-top: 10px;
+    padding: 0 20px;
+}
+
+  #todoapp #todo-stats .todo-clear a {
+	display: block;
+	line-height: 20px;
+	text-decoration: none;
+	-moz-border-radius: 12px;
+	-webkit-border-radius: 12px;
+	-o-border-radius: 12px;
+	-ms-border-radius: 12px;
+	-khtml-border-radius: 12px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.1);
+	color: #555555;
+	font-size: 11px;
+	margin-top: 8px;
+	padding: 0 10px 1px;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+/* line 136 */
+#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
+	background: rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
+    #todo-stats .todo-clear a {
+      color: #777777;
+      font-size: 12px;
+    }
+      #todo-stats .todo-clear a:visited {
+        color: #777777;
+      }
+      #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
+        color: #336699;
+      }
+
+#instructions {
+  width: 520px;
+  margin: 10px auto;
+  color: #777777;
+  text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+  text-align: center;
+}
+  #instructions a {
+    color: #336699;
+  }
+
+#credits {
+  width: 520px;
+  margin: 30px auto;
+  color: #999;
+  text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+  text-align: center;
+}
+  #credits a {
+    color: #888;
+  }
+
+
+/*
+ *  Fran�ois 'cahnory' Germain
+ */
+.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
+  color:#ffffff;
+  cursor:normal;
+  display:-moz-inline-stack;
+  display:inline-block;
+  font-size:12px;
+  font-family:arial;
+  padding:.5em 1em;
+  position:relative;
+  text-align:center;
+  text-shadow:0 -1px 1px #111111;
+  -webkit-border-top-left-radius:4px ;
+  -webkit-border-top-right-radius:4px ;
+  -webkit-border-bottom-right-radius:4px ;
+  -webkit-border-bottom-left-radius:4px ;
+  -khtml-border-top-left-radius:4px ;
+  -khtml-border-top-right-radius:4px ;
+  -khtml-border-bottom-right-radius:4px ;
+  -khtml-border-bottom-left-radius:4px ;
+  -moz-border-radius-topleft:4px ;
+  -moz-border-radius-topright:4px ;
+  -moz-border-radius-bottomright:4px ;
+  -moz-border-radius-bottomleft:4px ;
+  border-top-left-radius:4px ;
+  border-top-right-radius:4px ;
+  border-bottom-right-radius:4px ;
+  border-bottom-left-radius:4px ;
+  -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+  -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+  -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+  -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+  box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+  background-color:#3b3b3b;
+  background-image:-moz-linear-gradient(top,#555555,#222222);
+  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
+  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
+}
+.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
+  content:"\25B8";
+  display:block;
+  font-size:2em;
+  height:0;
+  line-height:0;
+  position:absolute;
+}
+.ui-tooltip:after, .ui-tooltip-bottom:after {
+  color:#2a2a2a;
+  bottom:0;
+  left:1px;
+  text-align:center;
+  text-shadow:1px 0 2px #000000;
+  -o-transform:rotate(90deg);
+  -moz-transform:rotate(90deg);
+  -khtml-transform:rotate(90deg);
+  -webkit-transform:rotate(90deg);
+  width:100%;
+}
+.ui-tooltip-top:after {
+  bottom:auto;
+  color:#4f4f4f;
+  left:-2px;
+  top:0;
+  text-align:center;
+  text-shadow:none;
+  -o-transform:rotate(-90deg);
+  -moz-transform:rotate(-90deg);
+  -khtml-transform:rotate(-90deg);
+  -webkit-transform:rotate(-90deg);
+  width:100%;
+}
+.ui-tooltip-right:after {
+  color:#222222;
+  right:-0.375em;
+  top:50%;
+  margin-top:-.05em;
+  text-shadow:0 1px 2px #000000;
+  -o-transform:rotate(0);
+  -moz-transform:rotate(0);
+  -khtml-transform:rotate(0);
+  -webkit-transform:rotate(0);
+}
+.ui-tooltip-left:after {
+  color:#222222;
+  left:-0.375em;
+  top:50%;
+  margin-top:.1em;
+  text-shadow:0 -1px 2px #000000;
+  -o-transform:rotate(180deg);
+  -moz-transform:rotate(180deg);
+  -khtml-transform:rotate(180deg);
+  -webkit-transform:rotate(180deg);
+}

architecture-examples/angularjs_persistencejs/index.html

+<!doctype html>
+<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
+<head>
+	<meta charset="utf-8">
+	<title>AngularJS with PersistenceJS Storage Todo App</title>
+	<link rel="stylesheet" href="css/app.css">
+	<!--[if IE]>
+	<script src="../../assets/ie.js"></script>
+	<![endif]-->
+</head>
+<body>
+		<div ng:controller="App.Controllers.TodoController" id="todoapp">
+			<div class="title">
+					<h1>
+							Todos
+					</h1>
+			</div>
+			<div class="content">
+					<div id="todo-form">
+					</div>
+					<form id="todo-form" ng:submit="addTodo()">
+							<input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text">
+							<span class="ui-tooltip-top" ng:show="showHitEnterHint">
+									Press Enter to save this task
+							</span>
+					</form>
+					<div id="todos">
+							<ul id="todo-list">
+								<li class="todo" ng:class="'editing-' + todo.editing + ' done-' + todo.done" ng:repeat="todo in todos">
+									<div class="display">
+										<input ng:change="changeStatus(todo)" class="check" type="checkbox" name="todo.done" / >
+										<div ng:click="editTodo(todo)" class="todo-content"> {{ todo.content }} </div>
+										<span class="todo-destroy" ng:click="removeTodo(todo)"></span>
+								 </div>
+								<div class="edit">
+									<form ng:submit="finishEditing(todo)">
+											<input class="todo-input" my:focus="todo.editing" my:blur="finishEditing(todo)" name="todo.content" type="text">
+									</form>
+								</div>
+								</li>
+							</ul>
+					</div>
+					<div id="todo-stats">
+						<span class="todo-count" ng:show="hasTodos()">
+							<ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
+							</ng:pluralize>
+						</span>
+						<span class="todo-clear" ng:show="hasFinishedTodos()">
+								<a ng:click="clearCompletedItems()">
+									Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
+									</ng:pluralize>
+								</a>
+						</span>
+			</div>
+			</div>
+	</div>
+	<ul id="instructions">
+		<li>Click to edit a todo.</li>
+	</ul>
+	<div id="credits">
+			<p>
+					Originally Created by
+					<br>
+					<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>
+			</p>
+			<p>
+					Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
+					<br>
+					<a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a>
+					<br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a>
+			</p>
+	<p>
+		Extended for persistent WebSQL storage by <br/>
+		<a href="http://jacobmumm.com">Jacob Mumm</a><br/>
+		Using <a href="http://persistencejs.org">PersistenceJS</a>
+	</p>
+	</div>
+	<script src="../../assets/base.js"></script>
+	<script src="js/booter.js"></script>
+	<script src="lib/angular/angular.min.js" ng:autobind></script>
+	<script src="lib/rx/rx.js"></script>
+	<script src="lib/rx/rx.angular.js"></script>
+	<script src="lib/persistence/persistence.js"></script>
+	<script src="lib/persistence/persistence.store.sql.js"></script>
+	<script src="lib/persistence/persistence.store.websql.js"></script>
+	<script src="js/controllers.js"></script>
+	<script src="js/directive.js"></script>
+	<script src="js/services.js"></script>
+</body>
+</html>
\ No newline at end of file

architecture-examples/angularjs_persistencejs/js/controllers.js

+/* App Controllers */
+
+App.Controllers.TodoController = function (persistencejs) {
+    var self = this;
+    self.newTodo = "";
+	self.editTodoStartContent = "";
+
+    self.addTodo = function() {
+        if (self.newTodo.length === 0) return;
+        
+        self.todos.push({
+            content: self.newTodo,
+            done: false,
+            editing: false
+        });
+		persistencejs.add(self.newTodo);
+        self.newTodo = "";
+    };
+
+    self.editTodo = function(todo) {
+        angular.forEach(self.todos, function(value) {
+            value.editing = false;
+        });
+        todo.editing = true;
+		self.editTodoStartContent = todo.content;
+    };
+
+	self.changeStatus = function(todo){
+		persistencejs.changeStatus(todo);
+	};
+	
+    self.finishEditing = function(todo) {
+        todo.editing = false;
+		persistencejs.edit(self.editTodoStartContent, todo.content);
+    };
+
+    self.removeTodo = function(todo) {
+        angular.Array.remove(self.todos, todo);
+		persistencejs.remove(todo);
+    };
+
+    self.todos = [];
+
+    var countTodos = function(done) {
+        return function() {
+            return angular.Array.count(self.todos, function(x) {
+                return x.done === (done === "done");
+            });
+        }
+    };
+
+    self.remainingTodos = countTodos("undone");
+
+    self.finishedTodos = countTodos("done");
+
+    self.clearCompletedItems = function() {
+        var oldTodos = self.todos;
+        self.todos = [];
+        angular.forEach(oldTodos, function(todo) {
+            if (!todo.done) self.todos.push(todo);
+        });
+		persistencejs.clearCompletedItems();
+    };
+
+    self.hasFinishedTodos = function() {
+        return self.finishedTodos() > 0;
+    };
+
+    self.hasTodos = function() {
+        return self.todos.length > 0;
+    };
+	
+	self.loadTodos = function(){
+		persistencejs.fetchAll(self);
+	}
+	
+	self.refresh = function(){ self.$apply(); }
+
+	self.loadTodos();
+	
+    /*
+     The following code deals with hiding the hint *while* you are typing,
+     showing it once you did *finish* typing (aka 500 ms since you hit the last key)
+     *in case* the result is a non empty string
+     */
+    Rx.Observable.FromAngularScope(self, "newTodo")
+        .Do(function() {
+            self.showHitEnterHint = false;
+        })
+        .Throttle(500)
+        .Select(function(x) {
+            return x.length > 0;
+        })
+        .ToOutputProperty(self, "showHitEnterHint");
+};
+
+App.Controllers.TodoController.$inject = ['persistencejs'];
\ No newline at end of file

architecture-examples/angularjs_persistencejs/js/services.js

+angular.service('persistencejs', function() {
+	persistence.store.websql.config(persistence, 'todo-angular-persistence', 'todo database', 5*1024*1024);
+	var Todo = persistence.define('todo', {
+		content: 'TEXT',
+		done: 'BOOL'
+	});
+	persistence.schemaSync();
+	return {
+		add: function(item){
+			var t = new Todo();
+			t.content = item;
+			t.done = false;
+			persistence.add(t);
+			persistence.flush();
+		},
+		
+		edit: function(startContent, endContent){
+			Todo.all().filter('content','=',startContent).one(function(item){
+				item.content = endContent;
+				persistence.flush();
+			});
+		},
+		
+		changeStatus: function(item){
+			Todo.all().filter('content','=',item.content).one(function(todo){
+				todo.done = item.done;
+				persistence.flush();
+			});
+		},
+		
+		clearCompletedItems: function(){
+			Todo.all().filter('done','=',true).destroyAll();
+		},
+		
+		remove: function(item){
+			Todo.all().filter('content','=',item.content).destroyAll();
+		},
+		
+		fetchAll: function(controller){
+			Todo.all().list(function(items){
+				var itemCount = items.length;
+				var todos = [];
+				items.forEach(function(item){
+					todos.push({
+						content: item.content,
+						done: item.done,
+						editing: false
+					});
+					if(--itemCount == 0){
+						controller.todos = todos;
+						controller.refresh();
+					}
+				});
+			});
+		},
+	};
+});

architecture-examples/angularjs_persistencejs/lib/rx/rx.angular.js

+(function () {
+    var global = this,
+        root = (typeof ProvideCustomRxRootObject == "undefined") ? global.Rx : ProvideCustomRxRootObject();
+
+    var observable = root.Observable;
+    var observableCreate = observable.Create;
+
+    observable.FromAngularScope = function (angularScope, propertyName) {
+        return observableCreate(function (observer) {
+            var unwatch = angularScope.$watch(function(){
+                return angularScope[propertyName];
+            }, 
+            function(){
+                observer.OnNext(angularScope[propertyName]);
+            });
+            return function () {
+                unwatch();
+            };
+        })
+        .Skip(1); //In AngularJS 0.10.x There is no way to avoid initial evaluation. So we take care about it!
+    };
+
+    observable.prototype.ToOutputProperty = function (scope, propertyName) {
+        var disposable = this.Subscribe(function (data) {
+            scope[propertyName] = data;
+            scope.$apply();
+        });
+        
+        scope.$on('$destroy', function(event){
+            //we need to asure that we only dispose the observable when it's our scope that
+            //was destroyed.
+
+            //TODO: Figure out if thats enough to asure the above (e.g what happens when
+            //a child scope will be destroyed but ours won't be affected. Or the other way around, 
+            //if a higher scope will be destroyed (and therefore ours as well) does it mean that $destroy() 
+            //will be also called on our scope or will our scope get destroyed without actually 
+            //calling $destroy() on it?
+            if (event.targetScope === scope){
+                disposable.Dispose();
+            }
+        });
+    };
+
+})();
\ No newline at end of file

architecture-examples/backbone/index.html

+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Backbone.js</title>
+    <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
+    <script src="js/json2.js"></script>
+    <script src="js/jquery-1.6.4.min.js"></script>
+    <script src="js/underscore-1.1.6.js"></script>
+    <script src="js/backbone.js"></script>
+    <script src="js/backbone-localstorage.js"></script>
+    <script src="js/todos.js"></script>
+  </head>
+
+  <body>
+
+    <!-- Todo App Interface -->
+
+    <div id="todoapp">
+
+      <div class="title">
+        <h1>Todos</h1>
+      </div>
+
+      <div class="content">
+
+        <div id="create-todo">
+          <input id="new-todo" placeholder="What needs to be done?" type="text" />
+          <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
+        </div>
+
+        <div id="todos">
+          <input class="check mark-all-done" type="checkbox"/>
+          <label for="check-all">Mark all as complete</label>
+          <ul id="todo-list"></ul>
+        </div>
+
+        <div id="todo-stats"></div>
+
+      </div>
+
+    </div>
+
+  
+    <div id="credits">
+      Created by
+      <br />
+      <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>. <br />Cleanup, edits: <a href="http://addyosmani.com">Addy Osmani</a>.
+    </div>
+
+    <!-- Templates -->
+
+    <script type="text/template" id="item-template">
+      <div class="todo <%= done ? 'done' : '' %>">
+        <div class="display">
+          <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+          <label class="todo-content"><%= content %></label>
+          <span class="todo-destroy"></span>
+        </div>
+        <div class="edit">
+          <input class="todo-input" type="text" value="<%= content %>" />
+        </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="stats-template">
+      <% if (total) { %>
+        <span class="todo-count">
+          <span class="number"><%= remaining %></span>
+          <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
+        </span>
+      <% } %>
+      <% if (done) { %>
+        <span class="todo-clear">
+          <a href="#">
+            Clear <span class="number-done"><%= done %></span>
+            completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
+          </a>
+        </span>
+      <% } %>
+    </script>
+
+  </body>
+
+</html>

architecture-examples/backbone/js/todos.js

+// An example Backbone application contributed by
+// [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a simple
+// [LocalStorage adapter](backbone-localstorage.js)
+// to persist Backbone models within your browser.
+
+// Load the application once the DOM is ready, using `jQuery.ready`:
+$(function(){
+
+  // Todo Model
+  // ----------
+
+  // Our basic **Todo** model has `content`, `order`, and `done` attributes.
+  var Todo = Backbone.Model.extend({
+
+    // Default attributes for the todo.
+    defaults: {
+      content: "empty todo...",
+      done: false
+    },
+
+    // Ensure that each todo created has `content`.
+    initialize: function() {
+      if (!this.get("content")) {
+        this.set({"content": this.defaults.content});
+      }
+    },
+
+    // Toggle the `done` state of this todo item.
+    toggle: function() {
+      this.save({done: !this.get("done")});
+    },
+
+    // Remove this Todo from *localStorage* and delete its view.
+    clear: function() {
+      this.destroy();
+    }
+
+  });
+
+  // Todo Collection
+  // ---------------
+
+  // The collection of todos is backed by *localStorage* instead of a remote
+  // server.
+  var TodoList = Backbone.Collection.extend({
+
+    // Reference to this collection's model.
+    model: Todo,
+
+    // Save all of the todo items under the `"todos"` namespace.
+    localStorage: new Store("todos-backbone"),
+
+    // Filter down the list of all todo items that are finished.
+    done: function() {
+      return this.filter(function(todo){ return todo.get('done'); });
+    },
+
+    // Filter down the list to only todo items that are still not finished.
+    remaining: function() {
+      return this.without.apply(this, this.done());
+    },
+
+    // We keep the Todos in sequential order, despite being saved by unordered
+    // GUID in the database. This generates the next order number for new items.
+    nextOrder: function() {
+      if (!this.length) return 1;
+      return this.last().get('order') + 1;
+    },
+
+    // Todos are sorted by their original insertion order.
+    comparator: function(todo) {
+      return todo.get('order');
+    }
+
+  });
+
+  // Create our global collection of **Todos**.
+  var Todos = new TodoList;
+
+  // Todo Item View
+  // --------------
+
+  // The DOM element for a todo item...
+  var TodoView = Backbone.View.extend({
+
+    //... is a list tag.
+    tagName:  "li",
+
+    // Cache the template function for a single item.
+    template: _.template($('#item-template').html()),
+
+    // The DOM events specific to an item.
+    events: {
+      "click .check"              : "toggleDone",
+      "dblclick label.todo-content" : "edit",
+      "click span.todo-destroy"   : "clear",
+      "keypress .todo-input"      : "updateOnEnter",
+      "blur .todo-input"          : "close"
+    },
+
+    // The TodoView listens for changes to its model, re-rendering. Since there's
+    // a one-to-one correspondence between a **Todo** and a **TodoView** in this
+    // app, we set a direct reference on the model for convenience.
+    initialize: function() {
+      _.bindAll(this, 'render', 'close', 'remove');
+      this.model.bind('change', this.render);
+      this.model.bind('destroy', this.remove);
+    },
+
+    // Re-render the contents of the todo item.
+    render: function() {
+      $(this.el).html(this.template(this.model.toJSON()));
+      this.input = this.$('.todo-input');
+      return this;
+    },
+
+    // Toggle the `"done"` state of the model.
+    toggleDone: function() {
+      this.model.toggle();
+    },
+
+    // Switch this view into `"editing"` mode, displaying the input field.
+    edit: function() {
+      $(this.el).addClass("editing");
+      this.input.focus();
+    },
+
+    // Close the `"editing"` mode, saving changes to the todo.
+    close: function() {
+      this.model.save({content: this.input.val()});
+      $(this.el).removeClass("editing");
+    },
+
+    // If you hit `enter`, we're through editing the item.
+    updateOnEnter: function(e) {
+      if (e.keyCode == 13) this.close();
+    },
+
+    // Remove the item, destroy the model.
+    clear: function() {
+      this.model.clear();
+    }
+
+  });
+
+  // The Application
+  // ---------------
+
+  // Our overall **AppView** is the top-level piece of UI.
+  var AppView = Backbone.View.extend({
+
+    // Instead of generating a new element, bind to the existing skeleton of
+    // the App already present in the HTML.
+    el: $("#todoapp"),
+
+    // Our template for the line of statistics at the bottom of the app.
+    statsTemplate: _.template($('#stats-template').html()),
+
+    // Delegated events for creating new items, and clearing completed ones.
+    events: {
+      "keypress #new-todo":  "createOnEnter",
+      "keyup #new-todo":     "showTooltip",
+      "click .todo-clear a": "clearCompleted",
+      "click .mark-all-done": "toggleAllComplete"
+    },
+
+    // At initialization we bind to the relevant events on the `Todos`
+    // collection, when items are added or changed. Kick things off by
+    // loading any preexisting todos that might be saved in *localStorage*.
+    initialize: function() {
+      _.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
+
+      this.input = this.$("#new-todo");
+      this.allCheckbox = this.$(".mark-all-done")[0];
+
+      Todos.bind('add',     this.addOne);
+      Todos.bind('reset',   this.addAll);
+      Todos.bind('all',     this.render);
+
+      Todos.fetch();
+    },
+
+    // Re-rendering the App just means refreshing the statistics -- the rest
+    // of the app doesn't change.
+    render: function() {
+      var done = Todos.done().length;
+      var remaining = Todos.remaining().length;
+
+      this.$('#todo-stats').html(this.statsTemplate({
+        total:      Todos.length,
+        done:       done,
+        remaining:  remaining
+      }));
+
+      this.allCheckbox.checked = !remaining;
+    },
+
+    // Add a single todo item to the list by creating a view for it, and
+    // appending its element to the `<ul>`.
+    addOne: function(todo) {
+      var view = new TodoView({model: todo});
+      this.$("#todo-list").append(view.render().el);
+    },
+
+    // Add all items in the **Todos** collection at once.
+    addAll: function() {
+      Todos.each(this.addOne);
+    },
+
+    // Generate the attributes for a new Todo item.
+    newAttributes: function() {
+      return {
+        content: this.input.val(),
+        order:   Todos.nextOrder(),
+        done:    false
+      };
+    },
+
+    // If you hit return in the main input field, create new **Todo** model,
+    // persisting it to *localStorage*.
+    createOnEnter: function(e) {
+      if (e.keyCode != 13) return;
+      Todos.create(this.newAttributes());
+      this.input.val('');
+    },
+
+    // Clear all done todo items, destroying their models.
+    clearCompleted: function() {
+      _.each(Todos.done(), function(todo){ todo.clear(); });
+      return false;
+    },
+
+    // Lazily show the tooltip that tells you to press `enter` to save
+    // a new todo item, after one second.
+    showTooltip: function(e) {
+      var tooltip = this.$(".ui-tooltip-top");
+      var val = this.input.val();
+      tooltip.fadeOut();
+      if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
+      if (val == '' || val == this.input.attr('placeholder')) return;
+      var show = function(){ tooltip.show().fadeIn(); };
+      this.tooltipTimeout = _.delay(show, 1000);
+    },
+
+    toggleAllComplete: function () {
+      var done = this.allCheckbox.checked;
+      Todos.each(function (todo) { todo.save({'done': done}); });
+    }
+
+  });
+
+  // Finally, we kick things off by creating the **App**.
+  var App = new AppView;
+
+});

architecture-examples/closure/index.html

+<!doctype html>
+<html>
+<head>
+	<title>Closure • TodoMVC</title>
+	<link href="css/todos.css" rel="stylesheet">
+	<!--[if IE]>
+	<script src="../../assets/ie.js"></script>
+	<![endif]-->
+</head>
+<body>
+	<div id="todoapp">
+		<div class="title">
+			<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>
+	<ul id="instructions">
+		<li>Click to edit a todo</li>
+	</ul>
+	<div id="credits">
+		Created by <a href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</a>
+	</div>
+	<script src="../../assets/base.js"></script>
+	<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > web/compiled.js) -->
+	<script type="text/javascript" src="js/compiled.js"></script>
+	<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
+	<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script> -->
+	<!-- The COMPILED development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
+	<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script> -->
+</body>
+</html>
\ No newline at end of file

architecture-examples/closure/js/main.js

+goog.require('goog.array');
+goog.require('goog.events.EventType');
+goog.require('goog.events.KeyCodes');
+goog.require('goog.ui.Component');
+goog.require('goog.ui.Control');
+
+goog.require('todomvc.model.ToDoItem');
+goog.require('todomvc.view');
+goog.require('todomvc.view.ClearCompletedControlRenderer');
+goog.require('todomvc.view.ItemCountControlRenderer');
+goog.require('todomvc.view.ToDoItemControl');
+goog.require('todomvc.view.ToDoListContainer');
+
+/**
+ * @fileoverview The controller/business logic for the application.
+ * 
+ * This file creates the interface and marshalls changes from the interface to the model and back.
+ */
+
+
+/**
+ * @type {Array.<todomvc.model.ToDoItem>}
+ */
+var items = [];
+
+/**
+ * @type {Element}
+ */
+var todoStats = document.getElementById('todo-stats');
+
+/**
+ * @type {goog.ui.Control}
+ */
+var itemCountControl = new goog.ui.Control(null, todomvc.view.ItemCountControlRenderer.getInstance());
+itemCountControl.render(todoStats);
+
+/**
+ * @type {goog.ui.Control}
+ */
+var clearCompletedControl = new goog.ui.Control(null, todomvc.view.ClearCompletedControlRenderer.getInstance());
+clearCompletedControl.render(todoStats);
+
+goog.events.listen(clearCompletedControl, goog.ui.Component.EventType.ACTION, function(e) {
+	// go backwards to avoid collection modification problems
+	goog.array.forEachRight(items, function(model) {
+		if (model.isDone()) {
+			goog.array.remove(items, model);
+			// do optimised model view sync
+			container.forEachChild(function(control) {
+				if (control.getModel() === model) {
+					container.removeChild(control, true);					
+				}
+			});
+		}
+	});
+	updateStats();
+});
+
+function updateStats() {
+	var doneCount = goog.array.reduce(items, function(count, model) {
+		return model.isDone() ? count + 1 : count;
+	}, 0);
+	var remainingCount = items.length - (/**@type {number}*/ doneCount); 
+	itemCountControl.setContent((/**@type {string}*/ remainingCount));
+	itemCountControl.setVisible(remainingCount > 0);
+	clearCompletedControl.setContent((/**@type {string}*/ doneCount));
+	clearCompletedControl.setVisible((/**@type {number}*/ doneCount) > 0);
+}
+updateStats();
+
+/**
+ * @type {todomvc.view.ToDoListContainer}
+ */
+var container = new todomvc.view.ToDoListContainer();
+container.decorate(document.getElementById('todo-list'));
+
+goog.events.listen(container, todomvc.view.ToDoItemControl.EventType.EDIT, function(e) {
+	/**
+	 * @type {todomvc.view.ToDoItemControl}
+	 */
+	var control = e.target;
+
+	/**
+	 * @type {todomvc.model.ToDoItem}
+	 */
+	var model = (/**@type {todomvc.model.ToDoItem} */ control.getModel());
+
+	// do optimised model view sync
+	model.setNote((/**@type {!string} */ control.getContent()));
+	model.setDone((/**@type {!boolean} */ control.isChecked()));
+
+	updateStats();
+});
+
+goog.events.listen(container, todomvc.view.ToDoItemControl.EventType.DESTROY, function(e) {
+	/**
+	 * @type {todomvc.view.ToDoItemControl}
+	 */
+	var control = e.target;
+
+	/**
+	 * @type {todomvc.model.ToDoItem}
+	 */
+	var model = (/**@type {todomvc.model.ToDoItem} */ control.getModel());
+	
+	// do optimised model view sync
+	goog.array.remove(items, model);
+	container.removeChild(control, true);
+	
+	updateStats();
+});
+
+/**
+ * @type {Element}
+ */
+var newToDo = document.getElementById('new-todo');
+goog.events.listen(newToDo, goog.events.EventType.KEYUP, function(e) {
+	if (e.keyCode === goog.events.KeyCodes.ENTER) {
+		/**
+		 * @type {todomvc.model.ToDoItem}
+		 */
+		var model = new todomvc.model.ToDoItem(newToDo.value);
+		
+		/**
+		 * @type {todomvc.view.ToDoItemControl}
+		 */
+		var control = new todomvc.view.ToDoItemControl();
+		
+		// do optimised model view sync
+		items.push(model);
+		
+		control.setContent(model.getNote());
+		control.setChecked(model.isDone());
+		control.setModel(model);
+		
+		container.addChild(control, true);
+		
+		// clear the input box
+		newToDo.value = '';
+		
+		updateStats();
+	}
+});
\ No newline at end of file

architecture-examples/closure/js/todomvc/model/ToDoItem.js

+goog.provide('todomvc.model.ToDoItem');
+
+/**
+ * The model object representing a todo item.
+ * 
+ * @param {!string} note the text associated with this item 
+ * @param {!boolean=} opt_done is this item complete? defaults to false 
+ * @constructor
+ */
+todomvc.model.ToDoItem = function(note, opt_done) {
+	/**
+	 * note the text associated with this item 
+	 * @private
+	 * @type {!string}
+	 */
+	this.note_ = note;
+	
+	/**
+	 * is this item complete?
+	 * @private
+	 * @type {!boolean}
+	 */
+	this.done_ = opt_done || false;
+};
+
+/**
+ * @return {!string} the text associated with this item 
+ */
+todomvc.model.ToDoItem.prototype.getNote = function() {
+	return this.note_;
+};
+
+/**
+ * @return {!boolean} is this item complete?
+ */
+todomvc.model.ToDoItem.prototype.isDone = function() {
+	return this.done_;
+};
+
+/**
+ * @param {!string} note the text associated with this item 
+ */
+todomvc.model.ToDoItem.prototype.setNote = function(note) {
+	this.note_ = note;
+};
+
+/**
+ * @param {!boolean} done is this item complete?
+ */
+todomvc.model.ToDoItem.prototype.setDone = function(done) {
+	this.done_ = done;
+};
\ No newline at end of file

architecture-examples/closure/js/todomvc/view/ClearCompletedControlRenderer.js

+goog.provide('todomvc.view.ClearCompletedControlRenderer');
+
+goog.require('goog.dom');
+goog.require('goog.ui.Component.State');
+goog.require('goog.ui.ControlRenderer');
+
+/**
+ * A renderer for the clear completed control.
+ * 
+ * @constructor
+ * @extends {goog.ui.ControlRenderer}
+ */
+todomvc.view.ClearCompletedControlRenderer = function() {
+	goog.ui.ControlRenderer.call(this);
+};
+goog.inherits(todomvc.view.ClearCompletedControlRenderer, goog.ui.ControlRenderer);
+
+// add getInstance method to todomvc.view.ClearCompletedControlRenderer
+goog.addSingletonGetter(todomvc.view.ClearCompletedControlRenderer);
+
+/**
+ * @param {goog.ui.Control} control Control to render.
+ * @return {Element} Root element for the control.
+ */
+todomvc.view.ClearCompletedControlRenderer.prototype.createDom = function(control) {
+	var html = todomvc.view.clearCompleted({
+		number : control.getContent()
+	});
+	var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
+	this.setAriaStates(control, element);
+	return element;
+};
+
+/**
+ * @param {Element} element Element to decorate.
+ * @return {boolean} Whether the renderer can decorate the element.
+ */
+todomvc.view.ClearCompletedControlRenderer.prototype.canDecorate = function(element) {
+	return false;
+};
+
+/**
+ * @param {Element} element Element to populate.
+ * @param {goog.ui.ControlContent} content Text caption or DOM
+ */
+todomvc.view.ClearCompletedControlRenderer.prototype.setContent = function(element, content) {
+	element.innerHTML = todomvc.view.clearCompletedInner({
+		number : content
+	});
+};
+
+/**
+ * Updates the appearance of the control in response to a state change.
+ * 
+ * @param {goog.ui.Control} control Control instance to update.
+ * @param {goog.ui.Component.State} state State to enable or disable.
+ * @param {boolean} enable Whether the control is entering or exiting the state.
+ */
+todomvc.view.ClearCompletedControlRenderer.prototype.setState = function(control, state, enable) {
+	var element = control.getElement();
+	if (element) {
+		this.updateAriaState(element, state, enable);
+	}
+};

architecture-examples/closure/js/todomvc/view/ItemCountControlRenderer.js

+goog.provide('todomvc.view.ItemCountControlRenderer');
+
+goog.require('goog.dom');
+goog.require('goog.ui.Component.State');
+goog.require('goog.ui.ControlRenderer');
+
+/**
+ * A renderer for the item count control.
+ * 
+ * @constructor
+ * @extends {goog.ui.ControlRenderer}
+ */
+todomvc.view.ItemCountControlRenderer = function() {
+	goog.ui.ControlRenderer.call(this);
+};
+goog.inherits(todomvc.view.ItemCountControlRenderer, goog.ui.ControlRenderer);
+
+// add getInstance method to todomvc.view.ItemCountControlRenderer
+goog.addSingletonGetter(todomvc.view.ItemCountControlRenderer);
+
+/**
+ * @param {goog.ui.Control} control Control to render.
+ * @return {Element} Root element for the control.
+ */
+todomvc.view.ItemCountControlRenderer.prototype.createDom = function(control) {
+	var html = todomvc.view.itemCount({
+		number : control.getContent()
+	});
+	var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
+	this.setAriaStates(control, element);
+	return element;
+};
+
+/**
+ * @param {Element} element Element to decorate.
+ * @return {boolean} Whether the renderer can decorate the element.
+ */
+todomvc.view.ItemCountControlRenderer.prototype.canDecorate = function(element) {
+	return false;
+};
+
+/**
+ * @param {Element} element Element to populate.
+ * @param {goog.ui.ControlContent} content Text caption or DOM
+ */
+todomvc.view.ItemCountControlRenderer.prototype.setContent = function(element, content) {
+	element.innerHTML = todomvc.view.itemCountInner({
+		number : content
+	});
+};
+
+/**
+ * Updates the appearance of the control in response to a state change.
+ * 
+ * @param {goog.ui.Control} control Control instance to update.
+ * @param {goog.ui.Component.State} state State to enable or disable.
+ * @param {boolean} enable Whether the control is entering or exiting the state.
+ */
+todomvc.view.ItemCountControlRenderer.prototype.setState = function(control, state, enable) {
+	var element = control.getElement();
+	if (element) {
+		this.updateAriaState(element, state, enable);
+	}
+};

architecture-examples/closure/js/todomvc/view/ToDoItemControl.js

+goog.provide('todomvc.view.ToDoItemControl');
+
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.ui.Component.State');
+goog.require('goog.ui.Control');
+
+goog.require('todomvc.view.ToDoItemControlRenderer');
+
+/**
+ * A control representing each item in the todo list. It makes use of the CHECKED and SELECTED states to represent being
+ * done and being in edit mode.
+ * 
+ * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for document interaction.
+ * @constructor
+ * @extends {goog.ui.Control}
+ */
+todomvc.view.ToDoItemControl = function(opt_domHelper) {
+	goog.ui.Control.call(this, "", todomvc.view.ToDoItemControlRenderer
+			.getInstance(), opt_domHelper);
+
+	// enable CHECKED and SELECTED states
+	this.setSupportedState(goog.ui.Component.State.CHECKED, true);
+	this.setSupportedState(goog.ui.Component.State.SELECTED, true);
+
+	// disable auto handling of CHECKED and SELECTED states
+	this.setAutoStates(goog.ui.Component.State.CHECKED, false);
+	this.setAutoStates(goog.ui.Component.State.SELECTED, false);
+
+	// allow text selection within this control
+	this.setAllowTextSelection(true);
+
+};
+goog.inherits(todomvc.view.ToDoItemControl, goog.ui.Control);
+
+todomvc.view.ToDoItemControl.EventType = {
+	EDIT: "edit",
+	DESTROY: "destroy"
+};
+
+
+/**
+ * Configures the component after its DOM has been rendered, and sets up event
+ * handling. Overrides {@link goog.ui.Component#enterDocument}.
+ * 
+ * @override
+ */
+todomvc.view.ToDoItemControl.prototype.enterDocument = function() {
+	todomvc.view.ToDoItemControl.superClass_.enterDocument.call(this);
+	// prevent clicking the checkbox (or anything within the root element)
+	// from having any default behaviour. This stops the checkbox being set
+	// by the browser.
+	this.getHandler().listen(this.getElement(), goog.events.EventType.CLICK,
+			function(e) {
+				e.preventDefault();
+			});
+};
+
+/**
+ * Returns the renderer used by this component to render itself or to decorate
+ * an existing element.
+ * 
+ * @return {todomvc.view.ToDoItemControlRenderer} Renderer used by the component
+ */
+todomvc.view.ToDoItemControl.prototype.getRenderer = function() {
+	return (/**@type {todomvc.view.ToDoItemControlRenderer}*/ this.renderer_);
+};
+
+/**
+ * Specialised handling of mouse events when clicking on the checkbox, label,
+ * textbox or remove link.
+ * 
+ * @param {goog.events.Event} e Mouse event to handle.
+ */
+todomvc.view.ToDoItemControl.prototype.handleMouseUp = function(e) {
+	todomvc.view.ToDoItemControl.superClass_.handleMouseUp.call(this, e);
+	if (this.isEnabled()) {
+		if (e.target === this.getRenderer().getCheckboxElement(
+				this.getElement())) {
+			this.setChecked(!this.isChecked());
+			this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.EDIT);
+		} else if (e.target === this.getRenderer().getDestroyElement(
+				this.getElement())) {
+			this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.DESTROY);
+		} else if (!this.isSelected()) {
+			this.setSelected(true);
+		}
+	}
+};
+
+/**
+ * Override the behaviour when the control is unfocused.
+ * @param {boolean} focused
+ */
+todomvc.view.ToDoItemControl.prototype.setFocused = function(focused) {
+	todomvc.view.ToDoItemControl.superClass_.setFocused.call(this, focused);
+	if (!focused && this.isSelected()) {
+		/**
+		 * @type {Element}
+		 */
+		var inputElement = this.getRenderer().getInputElement(
+				this.getElement());
+		this.setContent(inputElement.value);
+		this.setSelected(false);
+		this.dispatchEvent(todomvc.view.ToDoItemControl.EventType.EDIT);
+	}
+};
+
+/**
+ * Override the behaviour to switch to editing mode when the control is selected
+ * @param {boolean} selected
+ */
+todomvc.view.ToDoItemControl.prototype.setSelected = function(selected) {
+	todomvc.view.ToDoItemControl.superClass_.setSelected.call(this, selected);
+	if (selected) {
+		/**
+		 * @type {Element}
+		 */
+		var inputElement = this.getRenderer().getInputElement(
+				this.getElement());
+		inputElement.value = this.getContent();
+		inputElement.focus();
+	}
+};
\ No newline at end of file

architecture-examples/closure/js/todomvc/view/ToDoItemControlRenderer.js

+goog.provide('todomvc.view.ToDoItemControlRenderer');
+
+goog.require('goog.ui.Component.State');
+goog.require('goog.ui.ControlRenderer');
+
+/**
+ * The renderer for the ToDoItemControl which has knowledge of the DOM structure of the Control and the applicable CSS
+ * classes.
+ * 
+ * @constructor
+ * @extends {goog.ui.ControlRenderer}
+ */
+todomvc.view.ToDoItemControlRenderer = function() {
+	goog.ui.ControlRenderer.call(this);
+};
+goog.inherits(todomvc.view.ToDoItemControlRenderer, goog.ui.ControlRenderer);
+
+// add getInstance method to todomvc.view.ToDoItemControlRenderer
+goog.addSingletonGetter(todomvc.view.ToDoItemControlRenderer);
+
+/**
+ * @param {goog.ui.Control} control Control to render.
+ * @return {Element} Root element for the control.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.createDom = function(control) {
+	var html = todomvc.view.toDoItem({
+		content : control.getContent()
+	});
+	var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
+	this.setAriaStates(control, element);
+	return element;
+};
+
+/**
+ * Updates the appearance of the control in response to a state change.
+ * 
+ * @param {goog.ui.Control} control Control instance to update.
+ * @param {goog.ui.Component.State} state State to enable or disable.
+ * @param {boolean} enable Whether the control is entering or exiting the state.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.setState = function(control, state, enable) {
+	var element = control.getElement();
+	if (element) {
+		switch (state) {
+		case goog.ui.Component.State.CHECKED:
+			this.enableClassName(control, "done", enable);
+			this.getCheckboxElement(element).checked = enable;
+			break;
+		case goog.ui.Component.State.SELECTED:
+			this.enableClassName(control, "editing", enable);
+			break;
+		}
+
+		this.updateAriaState(element, state, enable);
+	}
+};
+
+/**
+ * Returns the element within the component's DOM that should receive keyboard
+ * focus (null if none).  The default implementation returns the control's root
+ * element.
+ * @param {goog.ui.Control} control Control whose key event target is to be
+ *     returned.
+ * @return {Element} The key event target.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getKeyEventTarget = function(control) {
+  return this.getInputElement(control.getElement());
+};
+
+/**
+ * Takes the control's root element and returns the display element
+ * 
+ * @param {Element} element Root element of the control whose display element is
+ *            to be returned.
+ * @return {Element} The control's display element.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getDisplayElement = function(
+		element) {
+	return element ? element.childNodes[0].childNodes[0] : null;
+};
+
+/**
+ * Takes the control's root element and returns the parent element of the
+ * control's contents.
+ * 
+ * @param {Element} element Root element of the control whose content element is
+ *            to be returned.
+ * @return {Element} The control's content element.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getContentElement = function(
+		element) {
+	return element ? this.getDisplayElement(element).childNodes[1] : null;
+};
+
+/**
+ * Takes the control's root element and returns the checkbox element
+ * 
+ * @param {Element} element Root element of the control whose checkbox element
+ *            is to be returned.
+ * @return {Element} The control's checkbox element.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getCheckboxElement = function(
+		element) {
+	return element ? this.getDisplayElement(element).childNodes[0] : null;
+};
+
+/**
+ * Takes the control's root element and returns the destroy element
+ * 
+ * @param {Element} element Root element of the control whose destroy element is
+ *            to be returned.
+ * @return {Element} The control's destroy element.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getDestroyElement = function(
+		element) {
+	return element ? this.getDisplayElement(element).childNodes[2] : null;
+};
+
+/**
+ * Takes the control's root element and returns the input element
+ * 
+ * @param {Element} element Root element of the control whose input element is
+ *            to be returned.
+ * @return {Element} The control's input element.
+ */
+todomvc.view.ToDoItemControlRenderer.prototype.getInputElement = function(
+		element) {
+	return element ? element.childNodes[0].childNodes[1].childNodes[0] : null;
+};

architecture-examples/closure/js/todomvc/view/ToDoListContainer.js

+goog.provide('todomvc.view.ToDoListContainer');
+
+goog.require('goog.ui.Container');
+
+goog.require('todomvc.view.ToDoListContainerRenderer');
+
+/**
+ * A container for the ToDoItemControls, overridden to support keyboard focus on child controls.
+ * 
+ * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper, used for document interaction.
+ * @constructor
+ * @extends {goog.ui.Container}
+ */
+todomvc.view.ToDoListContainer = function(opt_domHelper) {
+	goog.ui.Container
+			.call(this, goog.ui.Container.Orientation.VERTICAL,
+					todomvc.view.ToDoListContainerRenderer.getInstance(),
+					opt_domHelper);
+
+	// allow focus on children
+	this.setFocusable(false);
+	this.setFocusableChildrenAllowed(true);
+};
+goog.inherits(todomvc.view.ToDoListContainer, goog.ui.Container);
+
+/**
+ * Override this method to allow text selection in children.
+ * 
+ * @param {goog.events.BrowserEvent} e Mousedown event to handle.
+ */
+todomvc.view.ToDoListContainer.prototype.handleMouseDown = function(e) {
+	if (this.enabled_) {
+		this.setMouseButtonPressed(true);
+	}
+};
\ No newline at end of file

architecture-examples/closure/js/todomvc/view/ToDoListContainerRenderer.js

+goog.provide('todomvc.view.ToDoListContainerRenderer');
+
+goog.require('goog.ui.Component.State');
+goog.require('goog.ui.Container');
+goog.require('goog.ui.ContainerRenderer');
+
+/**
+ * A renderer for the container, overridden to support keyboard focus on child controls.
+ * @constructor
+ * @extends {goog.ui.ContainerRenderer}
+ */
+todomvc.view.ToDoListContainerRenderer = function() {
+	goog.ui.ContainerRenderer.call(this);
+};
+goog.inherits(todomvc.view.ToDoListContainerRenderer,
+				goog.ui.ContainerRenderer);
+goog.addSingletonGetter(todomvc.view.ToDoListContainerRenderer);
+
+/**
+ * @param {Element} element Element to decorate.
+ * @return {boolean} Whether the renderer can decorate the element.
+ */
+todomvc.view.ToDoListContainerRenderer.prototype.canDecorate = function(element) {
+	return element.tagName == 'UL';
+};
+
+/**
+ * Override this method to allow text selection in children
+ * 
+ * @param {goog.ui.Container} container Container whose DOM is to be initialized
+ *            as it enters the document.
+ */
+todomvc.view.ToDoListContainerRenderer.prototype.initializeDom = function(container) {
+	var elem = (/**@type {!Element}*/ container.getElement());
+
+	// Set the ARIA role.
+	var ariaRole = this.getAriaRole();
+	if (ariaRole) {
+		goog.dom.a11y.setRole(elem, ariaRole);
+	}
+};
\ No newline at end of file

architecture-examples/closure/js/todomvc/view/templates.soy

+{namespace todomvc.view}
+
+/**
+ * A todo list item template
+ * @param content the label for this item
+ */
+{template .toDoItem}
+  <li>
+    <div>
+      <div class="display">
+        <input class="check" type="checkbox" />
+        <div class="todo-content" style="cursor: pointer;">{$content}</div>
+        <span class="todo-destroy"></span>
+      </div>
+      <div class="edit">
+        <input class="todo-input" type="text"/>
+      </div>
+    </div>
+  </li>
+{/template}
+
+/**
+ * A todo list item count template
+ * @param number the count of items
+ */
+{template .itemCount}
+  <span class="todo-count">
+  	{call .itemCountInner data="all"/}
+  </span>
+{/template}
+
+/**
+ * A todo list item count template
+ * @param number the count of items
+ */
+{template .itemCountInner}
+   <span class="number">{$number}</span> <span class="word">{if $number > 1}items{else}item{/if}</span> left.
+{/template}
+
+/**
+ * A todo list clear completed template
+ * @param number the count of items
+ */
+{template .clearCompleted}
+<span class="todo-clear">
+  {call .clearCompletedInner data="all"/}
+</span>
+{/template}
+
+/**
+ * A todo list clear completed template
+ * @param number the count of items
+ */
+{template .clearCompletedInner}
+  <a href="#">
+    Clear <span class="number-done">{$number}</span> <span class="word-done">{if $number > 1}items{else}item{/if}</span>
+  </a>
+{/template}
\ No newline at end of file

architecture-examples/closure/plovr.json

+{
+  "id" :                "todomvc",
+  "inputs" :            "js/main.js",
+  "paths" :             "js/",
+  "output-wrapper" :    "(function(){%output%})();",
+  "mode" :              "ADVANCED",
+  "define" : {
+  	"goog.LOCALE": "en_GB"
+  },
+  "checks": {
+	  // Unfortunately, the Closure Library violates these in many places.
+	  // "accessControls": "ERROR",
+	  // "visibility": "ERROR"
+	
+	  "checkRegExp": "WARNING",
+	  "checkTypes": "WARNING",
+	  "checkVars": "WARNING",
+	  "deprecated": "WARNING",
+	  "fileoverviewTags": "WARNING",
+	  "invalidCasts": "WARNING",
+	  "missingProperties": "WARNING",
+	  "nonStandardJsDocs": "WARNING",
+	  "undefinedVars": "WARNING"
+	}
+}

architecture-examples/dojo/index.html

+<!doctype html>
+<html>
+<head>
+	<title>Dojo • TodoMVC</title>
+	<style>@import "./css/claro.css";</style>
+	<link href="css/todos.css" rel="stylesheet">
+	<!--[if IE]>
+	<script src="../../assets/ie.js"></script>
+	<![endif]-->
+</head>
+<body class="claro">
+	<div id="todoapp">
+		<div class="title">
+			<h1>Todos</h1>
+		</div>
+		<div class="content" data-dojo-type="todo.app"></div>
+		<div id="credits">
+			Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a>
+		</div>
+	</div>
+	<script src="../../assets/base.js"></script>
+	<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
+</body>
+</html>
\ No newline at end of file