CanJS improvements

- Single quotes
- Tabs
- Code style
- Remove all except jQuery one from site
- etc

index.html

@@ -157,6 +157,9 @@
 			<div class="span12">
 				<h2>Labs</h2>
 				<ul class="applist">
+					<li class="routing">
+						<a href="labs/architecture-examples/canjs/" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS</a>
+					</li>
 					<li>
 						<a href="labs/architecture-examples/maria/src/" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
 					</li>
@@ -241,27 +244,6 @@
 					<li class="routing">
 						<a href="labs/architecture-examples/thorax" data-source="https://github.com/walmartlabs/thorax" data-content="Thorax is a Backbone superset that integrates deeply with Handlebars to provide easy model and collection binding.">Thorax</a>
 					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/dojo/" data-source="http://canjs.us" data-content="CanJS with Dojo. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/dojo-widget/" data-source="http://canjs.us" data-content="CanJS with Dojo (includes a Dojo widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo Widget)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/jquery/" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/jquery-widget/" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery Widget)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/mootools/" data-source="http://canjs.us" data-content="CanJS with Mootools. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (MooTools)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/yui/" data-source="http://canjs.us" data-content="CanJS with YUI. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI)</a>
-					</li>
-					<li>
-						<a href="labs/architecture-examples/canjs/yui-widget/" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI Widget)</a>
-					</li>
 					<li class="routing">
 						<a href="labs/architecture-examples/dart/web/" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a>
 					</li>

labs/architecture-examples/canjs/css/app.css

-.hidden {
-	display: none;
-}
\ No newline at end of file

labs/architecture-examples/canjs/index.html

 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>CanJS • TodoMVC</title>
-  <link rel="stylesheet" href="../../../assets/base.css">
-  <link rel="stylesheet" href="css/app.css">
-  <!--[if IE]>
-  <script src="../../../assets/ie.js"></script>
-  <![endif]-->
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>CanJS • TodoMVC</title>
+	<link rel="stylesheet" href="../../../assets/base.css">
+	<!--[if IE]>
+	<script src="../../../assets/ie.js"></script>
+	<![endif]-->
 </head>
 <body>
-<section id="todoapp">
-</section>
-<div id="info">
-  <p>Double-click to edit a todo</p>
-  <p>Written by <a href="http://bitovi.com">Bitovi</a></p>
-  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-</div>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
-<script src="../../../assets/base.js"></script>
-
-<script src="js/lib/can.jquery-1.0.7.min.js"></script>
-<script src="js/lib/can-localstorage.min.js"></script>
-<script src="js/models/todo.js"></script>
-<script src="js/todos/todos.js"></script>
-<script src="js/app.js"></script>
-
+	<section id="todoapp"></section>
+	<div id="info">
+		<p>Double-click to edit a todo</p>
+		<p>Written by <a href="http://bitovi.com">Bitovi</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+	</div>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+	<script src="../../../assets/base.js"></script>
+	<script src="js/lib/can.jquery-1.0.7.min.js"></script>
+	<script src="js/lib/can-localstorage.min.js"></script>
+	<script src="js/models/todo.js"></script>
+	<script src="js/todos/todos.js"></script>
+	<script src="js/app.js"></script>
 </body>
 </html>

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

-(function () {
-	$(function () {
+(function() {
+	$(function() {
 		can.route(':filter');
 		// Initialize the app
-		Models.Todo.findAll({}, function (todos) {
+		Models.Todo.findAll({}, function(todos) {
 			new Todos('#todoapp', {
-				todos : todos,
-				state : can.route
+				todos: todos,
+				state: can.route
 			});
 		});
-	})
+	});
 })();

labs/architecture-examples/canjs/js/models/todo.js

+/*global can */
 (function (namespace, undefined) {
+	'use strict';
+
 	// Basic Todo entry model
 	// { text: 'todo', complete: false }
 	var Todo = can.Model.LocalStorage({
-		storageName : 'todos-canjs'
+		storageName: 'todos-canjs'
 	}, {
 		// Returns if this instance matches a given filter
 		// (currently `active` and `complete`)
-		matches : function (filter) {
+		matches: function(filter) {
 			return !filter || (filter === 'active' && !this.attr('complete'))
 				|| (filter === 'completed' && this.attr('complete'));
 		}
@@ -14,24 +17,25 @@
 
 	// List for Todos
 	Todo.List = can.Model.List({
-		completed : function () {
+		completed: function() {
 			var completed = 0;
-			this.each(function (todo) {
+
+			this.each(function(todo) {
 				completed += todo.attr('complete') ? 1 : 0;
 			});
 
 			return completed;
 		},
 
-		remaining : function () {
+		remaining: function() {
 			return this.attr('length') - this.completed();
 		},
 
-		allComplete : function () {
+		allComplete: function() {
 			return this.attr('length') === this.completed();
 		}
 	});
 
 	namespace.Models = namespace.Models || {};
 	namespace.Models.Todo = Todo;
-})(this);
+})(this);
\ No newline at end of file

labs/architecture-examples/canjs/js/todos/todos.js

+/*global can, Models, $ */
 (function (namespace, undefined) {
+	'use strict';
+
+	var ENTER_KEY = 13;
 	var Todos = can.Control({
 
 		// Initialize the Todos list
-		init : function () {
+		init: function() {
 			// Render the Todos
 			this.element.append(can.view('todos.ejs', this.options));
 
@@ -11,9 +15,9 @@
 		},
 
 		// Listen for when a new Todo has been entered
-		'#new-todo keyup' : function (el, ev) {
+		'#new-todo keyup': function(el, e) {
 			var value = can.trim(el.val());
-			if (ev.keyCode == 13 && value !== '') {
+			if (e.keyCode === ENTER_KEY && value !== '') {
 				new Models.Todo({
 					text : value,
 					complete : false
@@ -24,25 +28,25 @@
 		},
 
 		// Handle a newly created Todo
-		'{Models.Todo} created' : function (list, ev, item) {
+		'{Models.Todo} created': function(list, e, item) {
 			this.options.todos.push(item);
 			// Reset the filter so that you always see your new todo
-			this.options.state.removeAttr('filter')
+			this.options.state.removeAttr('filter');
 		},
 
 		// Listen for editing a Todo
-		'.todo dblclick' : function (el, ev) {
-			el.data('todo').attr('editing', true).save(function () {
+		'.todo dblclick': function(el) {
+			el.data('todo').attr('editing', true).save(function() {
 				el.children('.edit').focus();
 			});
 		},
 
 		// Update a todo
-		updateTodo : function (el) {
+		updateTodo: function(el) {
 			var value = can.trim(el.val()),
 				todo = el.closest('.todo').data('todo');
 
-			if (value == '') {
+			if (value === '') {
 				todo.destroy();
 			} else {
 				todo.attr({
@@ -53,37 +57,37 @@
 		},
 
 		// Listen for an edited Todo
-		'.todo .edit keyup' : function (el, ev) {
-			if (ev.keyCode == 13) {
+		'.todo .edit keyup': function(el, e) {
+			if (e.keyCode === ENTER_KEY) {
 				this.updateTodo(el);
 			}
 		},
-		'.todo .edit focusout' : function (el, ev) {
+		'.todo .edit focusout': function(el) {
 			this.updateTodo(el);
 		},
 
 		// Listen for the toggled completion of a Todo
-		'.todo .toggle click' : function (el, ev) {
+		'.todo .toggle click': function(el) {
 			el.closest('.todo').data('todo')
 				.attr('complete', el.is(':checked'))
 				.save();
 		},
 
 		// Listen for a removed Todo
-		'.todo .destroy click' : function (el) {
+		'.todo .destroy click': function(el) {
 			el.closest('.todo').data('todo').destroy();
 		},
 
 		// Listen for toggle all completed Todos
-		'#toggle-all click' : function (el, ev) {
+		'#toggle-all click': function (el) {
 			var toggle = el.prop('checked');
-			can.each(this.options.todos, function (todo) {
+			can.each(this.options.todos, function(todo) {
 				todo.attr('complete', toggle).save();
 			});
 		},
 
 		// Listen for removing all completed Todos
-		'#clear-completed click' : function () {
+		'#clear-completed click': function() {
 			for (var i = this.options.todos.length - 1, todo; i > -1 && (todo = this.options.todos[i]); i--) {
 				if (todo.attr('complete')) {
 					todo.destroy();
@@ -95,4 +99,4 @@
 	});
 
 	namespace.Todos = Todos;
-})(this);
+})(this);
\ No newline at end of file

labs/architecture-examples/canjs/todos.ejs

 <header id="header">
-  <h1>todos</h1>
-  <input id="new-todo" placeholder="What needs to be done?" autofocus="">
+	<h1>todos</h1>
+	<input id="new-todo" placeholder="What needs to be done?" autofocus>
 </header>
-
-<section id="main" class="<%= todos.attr("length") > 0 ? "show" : "" %>">
-<input id="toggle-all" type="checkbox" <%= todos.allComplete() ? "checked" : "" %>>
+<section id="main" class="<%= todos.attr("length") > 0 ? 'show' : '' %>">
+<input id="toggle-all" type="checkbox" <%= todos.allComplete() ? 'checked' : '' %>>
 <label for="toggle-all">Mark all as complete</label>
 <ul id="todo-list">
-  <% todos.each(function( todo ) { %>
-    <li class="todo
-        <%= todo.matches(state.attr('filter')) ? "" : "hidden" %>
-        <%= todo.attr("complete") ? "completed" : "" %>
-        <%= todo.attr("editing") ? "editing" : "" %>"
-        <%= (el)-> el.data('todo', todo) %>>
-      <div class="view">
-        <input class="toggle" type="checkbox" <%= todo.attr("complete") ? "checked" : "" %>>
-        <label><%= todo.attr("text") %></label>
-        <button class="destroy"></button>
-      </div>
-      <input class="edit" type="text" value="<%= todo.attr("text") %>">
-    </li>
-  <% }) %>
+	<% todos.each(function( todo ) { %>
+		<li class="todo
+				<%= todo.matches(state.attr('filter')) ? '' : 'hidden' %>
+				<%= todo.attr('complete') ? 'completed' : '' %>
+				<%= todo.attr('editing') ? 'editing' : '' %>"
+				<%= (el)-> el.data('todo', todo) %>>
+			<div class="view">
+				<input class="toggle" type="checkbox" <%= todo.attr('complete') ? 'checked' : '' %>>
+				<label><%= todo.attr('text') %></label>
+				<button class="destroy"></button>
+			</div>
+			<input class="edit" value="<%= todo.attr('text') %>">
+		</li>
+	<% }) %>
 </ul>
 </section>
-
 <footer id="footer" class="<%= todos.attr('length') === 0 ? 'hidden' : '' %>">
-  <span id="todo-count">
-    <strong><%= todos.remaining() %></strong>
-    item<%= todos.remaining() == 1 ? "" : "s" %> left
-  </span>
-  <ul id="filters">
-    <li>
-      <a class="<%= !state.attr('filter') ? 'selected' : '' %>" href="#!">All</a>
-    </li>
-    <li>
-      <a class="<%= state.attr('filter') == 'active' ? 'selected' : '' %>" href="#!active">
-        Active
-      </a>
-    </li>
-    <li>
-      <a class="<%= state.attr('filter') == 'completed' ? 'selected' : '' %>" href="#!completed">
-        Completed
-      </a>
-    </li>
-  </ul>
-  <button id="clear-completed" class="<%= todos.completed() === 0 ? 'hidden' : '' %>">
-    Clear <%= todos.completed() %>
-    completed item<%= todos.completed() == 1 ? "" : "s" %>
-  </button>
+	<span id="todo-count">
+		<strong><%= todos.remaining() %></strong>
+		item<%= todos.remaining() == 1 ? '' : 's' %> left
+	</span>
+	<ul id="filters">
+		<li>
+			<a class="<%= !state.attr('filter') ? 'selected' : '' %>" href="#!">All</a>
+		</li>
+		<li>
+			<a class="<%= state.attr('filter') === 'active' ? 'selected' : '' %>" href="#!active">
+				Active
+			</a>
+		</li>
+		<li>
+			<a class="<%= state.attr('filter') === 'completed' ? 'selected' : '' %>" href="#!completed">
+				Completed
+			</a>
+		</li>
+	</ul>
+	<button id="clear-completed" class="<%= todos.completed() === 0 ? 'hidden' : '' %>">
+		Clear <%= todos.completed() %>
+		completed item<%= todos.completed() === 1 ? '' : 's' %>
+	</button>
 </footer>