Initial commit

need to tidy up directory structure to match the others

architecture-examples/closure/plovr.json

+{
+  "id" :                "todomvc",
+  "inputs" :            "src/main.js",
+  "paths" :             "src/",
+  "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"
+	}
+}
\ No newline at end of file

architecture-examples/closure/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/web/index.htm

+<!DOCTYPE html>
+<html>
+<head>
+<title>Closure</title>
+<link href="css/todos.css" media="all" rel="stylesheet" type="text/css" />
+</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" /> <span
+					class="ui-tooltip-top" style="display: none;">Press Enter to
+					save this task</span>
+			</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 <br /> <a href="http://jgn.me/">J&eacute;r&ocirc;me
+			Gravel-Niquet</a> <br /> Modified to use Closure by <a
+			href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</a>
+	</div>
+	<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > web/compiled.js) -->
+	<script type="text/javascript" src="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