Adding initial TypeScript + Backbone app for #359, updating lab link colors to...

Adding initial TypeScript + Backbone app for #359, updating lab link colors to maroon, correcting app count.

index.html

@@ -122,13 +122,13 @@
 						<a href="labs/architecture-examples/rappidjs/" data-source="http://www.rappidjs.com" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid.js</a>
 					</li>
 					<li class="routing labs">
-						<a href="labs/architecture-examples/o_O/" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br> - Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js</a>
+						<a href="labs/architecture-examples/o_O/" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding &lt;br> - Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js</a>
 					</li>
 					<li class="routing labs">
-						<a href="labs/architecture-examples/knockoutjs_classBindingProvider/" data-source="https://github.com/rniemeyer/knockout-classBindingProvider" data-content="This project is an adaptation of /architecture-examples/knockoutjs with Ryan Niemeyer's Class Binding Provider.">Knockout +</br> ClassBindingProvider</a>
+						<a href="labs/architecture-examples/knockoutjs_classBindingProvider/" data-source="https://github.com/rniemeyer/knockout-classBindingProvider" data-content="This project is an adaptation of /architecture-examples/knockoutjs with Ryan Niemeyer's Class Binding Provider.">Knockout +</br> ClassBinding</a>
 					</li>
 					<li class="routing labs">
-						<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS (optimized)</a>
+						<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS </br>(optimized)</a>
 					</li>
 				</ul>
 				<hr>
@@ -146,6 +146,9 @@
 					<li>
 						<a href="architecture-examples/gwt/" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
 					</li>
+					<li class="labs">
+						<a href="labs/architecture-examples/typescript-backbone/" data-source="https://typescript.com" data-content="TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components.">TypeScript </br>+ Backbone.js</a>
+					</li>
 					<li class="routing">
 						<a href="architecture-examples/closure/" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
 					</li>
@@ -210,7 +213,7 @@
 					</li>
 				</ul>
 				<p>* <span class="label">R</span> = App also demonstrates routing</p>
-				<p>* Gray = App requires further work to be spec-compliant</p>
+				<p>* Maroon = App requires further work to be spec-compliant</p>
 			</div>
 		</div>
 		<hr>
@@ -235,7 +238,7 @@
 				<ul class="whats-new">
 					<li>All main apps have been completely rewritten for consistency</li>
 					<li>Routing has been added to many of these</li>
-					<li>We now have 30+ apps being worked on in Labs</li>
+					<li>We now have 40+ apps being worked on in Labs</li>
 					<li>We're using a kick-ass new template</li>
 					<li>Framework authors and contributors have been consulted to ensure our apps adhere to best practices</li>
 					<li>We're helping AMD users by adding AMD versions of many apps</li>

labs/architecture-examples/typescript-backbone/index.html

+<!-- ---------------------------------------------------------------------------------------
+index.html
+Microsoft grants you the right to use these script files under the Apache 2.0 license. 
+Microsoft reserves all other rights to the files not expressly granted by Microsoft, 
+whether by implication, estoppel or otherwise. The copyright notices and MIT licenses 
+below are for informational purposes only.
+
+Portions Copyright © Microsoft Corporation
+Apache 2.0 License
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this 
+file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under 
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF 
+ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and limitations 
+under the License.
+------------------------------------------------------------------------------------------
+Provided for Informational Purposes Only
+MIT License
+Permission is hereby granted, free of charge, to any person obtaining a copy of this 
+software and associated documentation files (the "Software"), to deal in the Software 
+without restriction, including without limitation the rights to use, copy, modify, merge, 
+publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies 
+or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.
+---------------------------------------------------------------------------------------
+
+index.html
+https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html 
+-->
+
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>TypeScript + Backbone.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>
+				 <div id="create-todo">
+					<input id="new-todo" placeholder="What needs to be done?" autofocus>
+				</div>
+			</header>
+				<section id="main">
+					<input class="check mark-all-done" id="toggle-all" type="checkbox">
+					<label for="toggle-all">Mark all as complete</label>
+					<ul id="todo-list"></ul>
+				</section>
+				<footer id="footer">
+					<div id="todo-stats"></div>
+				</footer>
+		</section>
+		<footer id="info">
+			<p>Double-click to edit a todo</p>
+			<p>TypeScript version by <a href="http://blogs.msdn.com/lukeh">Luke Hoban</a></p>
+			<p>Cleanup, edits: <a href="http://addyosmani.com">Addy Osmani</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+
+		<!-- Templates -->
+
+		<script type="text/template" id="item-template">
+			<div class="todo <%= done ? 'done' : '' %>">
+				<div class="view display">
+					<input class="toggle check" type="checkbox" <%= done ? 'checked' : '' %>>
+					<label class="todo-content"><%= content %></label>
+					<button class="destroy"></button>
+				</div>
+				<input class="edit todo-input" value="<%= content %>">
+			</div>
+		</script>
+
+		<script type="text/template" id="stats-template">
+			<% if (total) { %>
+				<span id="todo-count">
+					<strong class="number"><%= remaining %></strong>
+					<span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left
+				</span>
+			<% } %>
+			<% if (done) { %>
+				<span class="todo-clear">
+					<button id="clear-completed">
+						Clear completed (<span class="number-done"><%= done %></span>)
+					</button>
+				</span>
+			<% } %>
+		</script>
+
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
+		<script src="js/todos.js"></script>
+	</body>
+</html>

labs/architecture-examples/typescript-backbone/js/app.js

+var __extends = this.__extends || function (d, b) {
+    function __() { this.constructor = d; }
+    __.prototype = b.prototype;
+    d.prototype = new __();
+};
+var Todo = (function (_super) {
+    __extends(Todo, _super);
+    function Todo() {
+        _super.apply(this, arguments);
+
+    }
+    Todo.prototype.defaults = function () {
+        return {
+            content: "empty todo...",
+            done: false
+        };
+    };
+    Todo.prototype.initialize = function () {
+        if(!this.get("content")) {
+            this.set({
+                "content": this.defaults().content
+            });
+        }
+    };
+    Todo.prototype.toggle = function () {
+        this.save({
+            done: !this.get("done")
+        });
+    };
+    Todo.prototype.clear = function () {
+        this.destroy();
+    };
+    return Todo;
+})(Backbone.Model);
+var TodoList = (function (_super) {
+    __extends(TodoList, _super);
+    function TodoList() {
+        _super.apply(this, arguments);
+
+        this.model = Todo;
+        this.localStorage = new Store("todos-backbone");
+    }
+    TodoList.prototype.done = function () {
+        return this.filter(function (todo) {
+            return todo.get('done');
+        });
+    };
+    TodoList.prototype.remaining = function () {
+        return this.without.apply(this, this.done());
+    };
+    TodoList.prototype.nextOrder = function () {
+        if(!length) {
+            return 1;
+        }
+        return this.last().get('order') + 1;
+    };
+    TodoList.prototype.comparator = function (todo) {
+        return todo.get('order');
+    };
+    return TodoList;
+})(Backbone.Collection);
+var Todos = new TodoList();
+var TodoView = (function (_super) {
+    __extends(TodoView, _super);
+    function TodoView(options) {
+        this.tagName = "li";
+        this.events = {
+            "click .check": "toggleDone",
+            "dblclick label.todo-content": "edit",
+            "click button.destroy": "clear",
+            "keypress .todo-input": "updateOnEnter",
+            "blur .todo-input": "close"
+        };
+        _super.call(this, options);
+        this.template = _.template($('#item-template').html());
+        _.bindAll(this, 'render', 'close', 'remove');
+        this.model.bind('change', this.render);
+        this.model.bind('destroy', this.remove);
+    }
+    TodoView.prototype.render = function () {
+        this.$el.html(this.template(this.model.toJSON()));
+        this.input = this.$('.todo-input');
+        return this;
+    };
+    TodoView.prototype.toggleDone = function () {
+        this.model.toggle();
+    };
+    TodoView.prototype.edit = function () {
+        this.$el.addClass("editing");
+        this.input.focus();
+    };
+    TodoView.prototype.close = function () {
+        this.model.save({
+            content: this.input.val()
+        });
+        this.$el.removeClass("editing");
+    };
+    TodoView.prototype.updateOnEnter = function (e) {
+        if(e.keyCode == 13) {
+            close();
+        }
+    };
+    TodoView.prototype.clear = function () {
+        this.model.clear();
+    };
+    return TodoView;
+})(Backbone.View);
+var AppView = (function (_super) {
+    __extends(AppView, _super);
+    function AppView() {
+        _super.call(this);
+        this.events = {
+            "keypress #new-todo": "createOnEnter",
+            "keyup #new-todo": "showTooltip",
+            "click .todo-clear button": "clearCompleted",
+            "click .mark-all-done": "toggleAllComplete"
+        };
+        this.tooltipTimeout = null;
+        this.setElement($("#todoapp"), true);
+        _.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
+        this.input = this.$("#new-todo");
+        this.allCheckbox = this.$(".mark-all-done")[0];
+        this.statsTemplate = _.template($('#stats-template').html());
+        Todos.bind('add', this.addOne);
+        Todos.bind('reset', this.addAll);
+        Todos.bind('all', this.render);
+        Todos.fetch();
+    }
+    AppView.prototype.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;
+    };
+    AppView.prototype.addOne = function (todo) {
+        var view = new TodoView({
+            model: todo
+        });
+        this.$("#todo-list").append(view.render().el);
+    };
+    AppView.prototype.addAll = function () {
+        Todos.each(this.addOne);
+    };
+    AppView.prototype.newAttributes = function () {
+        return {
+            content: this.input.val(),
+            order: Todos.nextOrder(),
+            done: false
+        };
+    };
+    AppView.prototype.createOnEnter = function (e) {
+        if(e.keyCode != 13) {
+            return;
+        }
+        Todos.create(this.newAttributes());
+        this.input.val('');
+    };
+    AppView.prototype.clearCompleted = function () {
+        _.each(Todos.done(), function (todo) {
+            return todo.clear();
+        });
+        return false;
+    };
+    AppView.prototype.showTooltip = function (e) {
+        var tooltip = $(".ui-tooltip-top");
+        var val = this.input.val();
+        tooltip.fadeOut();
+        if(this.tooltipTimeout) {
+            clearTimeout(this.tooltipTimeout);
+        }
+        if(val == '' || val == this.input.attr('placeholder')) {
+            return;
+        }
+        this.tooltipTimeout = _.delay(function () {
+            return tooltip.show().fadeIn();
+        }, 1000);
+    };
+    AppView.prototype.toggleAllComplete = function () {
+        var done = this.allCheckbox.checked;
+        Todos.each(function (todo) {
+            return todo.save({
+                'done': done
+            });
+        });
+    };
+    return AppView;
+})(Backbone.View);
+$(function () {
+    new AppView();
+});

labs/architecture-examples/typescript-backbone/js/app.ts

+/* ---------------------------------------------------------------------------------------
+Todos.ts
+Microsoft grants you the right to use these script files under the Apache 2.0 license. 
+Microsoft reserves all other rights to the files not expressly granted by Microsoft, 
+whether by implication, estoppel or otherwise. The copyright notices and MIT licenses 
+below are for informational purposes only.
+
+Portions Copyright © Microsoft Corporation
+Apache 2.0 License
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this 
+file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under 
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF 
+ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and limitations 
+under the License.
+------------------------------------------------------------------------------------------
+Provided for Informational Purposes Only
+MIT License
+Permission is hereby granted, free of charge, to any person obtaining a copy of this 
+software and associated documentation files (the "Software"), to deal in the Software 
+without restriction, including without limitation the rights to use, copy, modify, merge, 
+publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies 
+or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.
+--------------------------------------------------------------------------------------- */
+// Todos.js
+// https://github.com/documentcloud/backbone/blob/master/examples/todos/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.
+
+declare var $: any;
+declare module Backbone {
+	export class Model {
+		constructor (attr? , opts? );
+		get(name: string): any;
+		set(name: string, val: any): void;
+		set(obj: any): void;
+		save(attr? , opts? ): void;
+		destroy(): void;
+		bind(ev: string, f: Function, ctx?: any): void;
+		toJSON(): any;
+	}
+	export class Collection {
+		constructor (models? , opts? );
+		bind(ev: string, f: Function, ctx?: any): void;
+		collection: Model;
+		length: number;
+		create(attrs, opts? ): Collection;
+		each(f: (elem: any) => void ): void;
+		fetch(opts?: any): void;
+		last(): any;
+		last(n: number): any[];
+		filter(f: (elem: any) => any): Collection;
+		without(...values: any[]): Collection;
+	}
+	export class View {
+		constructor (options? );
+		$(selector: string): any;
+		el: HTMLElement;
+		$el: any;
+		model: Model;
+		remove(): void;
+		delegateEvents: any;
+		make(tagName: string, attrs? , opts? ): View;
+		setElement(element: HTMLElement, delegate?: bool): void;
+		tagName: string;
+		events: any;
+
+		static extend: any;
+	}
+}
+declare var _: any;
+declare var Store: any;
+
+
+// Todo Model
+// ----------
+
+// Our basic **Todo** model has `content`, `order`, and `done` attributes.
+class Todo extends Backbone.Model {
+
+	// Default attributes for the todo.
+	defaults() {
+		return {
+			content: '',
+			done: false
+		}
+	};
+
+	// Ensure that each todo created has `content`.
+	initialize() {
+		if (!this.get('content')) {
+			this.set({ 'content': this.defaults().content });
+		}
+	}
+
+	// Toggle the `done` state of this todo item.
+	toggle() {
+		this.save({ done: !this.get('done') });
+	}
+
+	// Remove this Todo from *localStorage* and delete its view.
+	clear() {
+		this.destroy();
+	}
+
+}
+
+// Todo Collection
+// ---------------
+
+// The collection of todos is backed by *localStorage* instead of a remote
+// server.
+class TodoList extends Backbone.Collection {
+
+	// Reference to this collection's model.
+	model = Todo;
+
+	// Save all of the todo items under the `'todos'` namespace.
+	localStorage = new Store('todos-typescript-backbone');
+
+	// Filter down the list of all todo items that are finished.
+	done() {
+		return this.filter((todo: Todo) => todo.get('done'));
+	}
+
+	// Filter down the list to only todo items that are still not finished.
+	remaining() {
+		return this.without(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() {
+		if (!length) return 1;
+		return this.last().get('order') + 1;
+	}
+
+	// Todos are sorted by their original insertion order.
+	comparator(todo: 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...
+class TodoView extends Backbone.View {
+
+	// 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.
+	template: (data: any) => string;
+
+	// A TodoView model must be a Todo, redeclare with specific type
+	model: Todo;
+	input: any;
+
+	constructor (options? ) {
+		//... is a list tag.
+		this.tagName = 'li';
+
+		// The DOM events specific to an item.
+		this.events = {
+			'click .check': 'toggleDone',
+			'dblclick label.todo-content': 'edit',
+			'click button.destroy': 'clear',
+			'keypress .todo-input': 'updateOnEnter',
+			'blur .todo-input': 'close'
+		};
+
+		super(options);
+
+		// Cache the template function for a single item.
+		this.template = _.template($('#item-template').html());
+
+		_.bindAll(this, 'render', 'close', 'remove');
+		this.model.bind('change', this.render);
+		this.model.bind('destroy', this.remove);
+	}
+w
+	// Re-render the contents of the todo item.
+	render() {
+		this.$el.html(this.template(this.model.toJSON()));
+		this.input = this.$('.todo-input');
+		return this;
+	}
+
+	// Toggle the `'done'` state of the model.
+	toggleDone() {
+		this.model.toggle();
+	}
+
+	// Switch this view into `'editing'` mode, displaying the input field.
+	edit() {
+		this.$el.addClass('editing');
+		this.input.focus();
+	}
+
+	// Close the `'editing'` mode, saving changes to the todo.
+	close() {
+		this.model.save({ content: this.input.val() });
+		this.$el.removeClass('editing');
+	}
+
+	// If you hit `enter`, we're through editing the item.
+	updateOnEnter(e) {
+		if (e.keyCode == 13) close();
+	}
+
+	// Remove the item, destroy the model.
+	clear() {
+		this.model.clear();
+	}
+
+}
+
+// The Application
+// ---------------
+
+// Our overall **AppView** is the top-level piece of UI.
+class AppView extends Backbone.View {
+
+	// Delegated events for creating new items, and clearing completed ones.
+	events = {
+		'keypress #new-todo': 'createOnEnter',
+		'click .todo-clear button': 'clearCompleted',
+		'click .mark-all-done': 'toggleAllComplete'
+	};
+
+	input: any;
+	allCheckbox: HTMLInputElement;
+	statsTemplate: (params: any) => string;
+
+	constructor () {
+		super();
+		// Instead of generating a new element, bind to the existing skeleton of
+		// the App already present in the HTML.
+		this.setElement($('#todoapp'), true);
+
+		// 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*.
+		_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
+
+		this.input = this.$('#new-todo');
+		this.allCheckbox = this.$('.mark-all-done')[0];
+		this.statsTemplate = _.template($('#stats-template').html());
+
+		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() {
+		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(todo) {
+		var view = new TodoView({ model: todo });
+		this.$('#todo-list').append(view.render().el);
+	}
+
+	// Add all items in the **Todos** collection at once.
+	addAll() {
+		Todos.each(this.addOne);
+	}
+
+	// Generate the attributes for a new Todo item.
+	newAttributes() {
+		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(e) {
+		if (e.keyCode != 13) return;
+		Todos.create(this.newAttributes());
+		this.input.val('');
+	}
+
+	// Clear all done todo items, destroying their models.
+	clearCompleted() {
+		_.each(Todos.done(), (todo: Todo) => todo.clear());
+		return false;
+	}
+
+	toggleAllComplete() {
+		var done = this.allCheckbox.checked;
+		Todos.each((todo: Todo) => todo.save({ 'done': done }));
+	}
+
+}
+
+// Load the application once the DOM is ready, using `jQuery.ready`:
+$(() => {
+	// Finally, we kick things off by creating the **App**.
+	new AppView();
+});

labs/architecture-examples/typescript-backbone/readme.md

+# TypeScript TodoMVC app
+
+
+## Overview
+
+TypeScript integration points are highlighted:
+- Backbone.js: Using TypeScript classes to create Backbone models and views
+- jQuery: Using jQuery for all DOM manipulation
+
+
+## Running
+```shell
+tsc js\app.ts
+open index.html
+```
+
+## Caveats
+
+This sample uses localStorage and will not run properly on Internet Explore if run from the local filesystem. Instead, run the app from a web server.
+
+
+## License
+
+Microsoft grants you the right to use these script files under the Apache 2.0 license. 
+Microsoft reserves all other rights to the files not expressly granted by Microsoft, 
+whether by implication, estoppel or otherwise. The copyright notices and MIT licenses 
+below are for informational purposes only.
+
+Portions Copyright © Microsoft Corporation
+Apache 2.0 License
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this 
+file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under 
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF 
+ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and limitations 
+under the License.
+------------------------------------------------------------------------------------------
+Provided for Informational Purposes Only
+MIT License
+Permission is hereby granted, free of charge, to any person obtaining a copy of this 
+software and associated documentation files (the "Software"), to deal in the Software 
+without restriction, including without limitation the rights to use, copy, modify, merge, 
+publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies 
+or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

site/css/main.css

@@ -162,7 +162,7 @@ header nav a:first-child {
 }
 
 .applist .labs a{
-	color:#666;
+	color:#582C42;
 }
 
 .applist .label,