Fixes for dermis app + add to index

index.html

@@ -184,6 +184,9 @@ <h2>Labs</h2>
 					<li>
 						<a href="labs/architecture-examples/javascriptmvc/todo/todo/" data-source="http://javascriptmvc.com" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
 					</li>
+					<li>
+						<a href="labs/architecture-examples/dermis" data-source="https://github.com/wearefractal/dermis" data-content="dermis is a tiny framework that provides models, collections, controllers, and data-binding out of the box. dermis is designed to be the simplest possible solution for creating complex applications">dermis</a>
+					</li>
 					<li>
 						<a href="labs/architecture-examples/stapes/" data-source="http://hay.github.com/stapes" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes</a>
 					</li>

labs/architecture-examples/dermis/README.md

@@ -2,6 +2,7 @@
 
 A todo app built using [dermis](https://github.com/wearefractal/dermis)
 
+dermis is a tiny framework that provides models, collections, controllers, and data-binding out of the box. dermis is designed to be the simplest possible solution for creating complex applications
 
 ## Run
 

labs/architecture-examples/dermis/index.html

@@ -16,27 +16,24 @@ <h1>todos</h1>
 			<input id="new-todo" placeholder="What needs to be done?" autofocus>
 		</header>
 		<div id="content">
-			<section id="main" data-show=".items | length | overZero">
-				<input id="toggle-all" type="checkbox" data-on-click=":toggle" data-checked=":allCompleted < .items" data-show=":all < .items | length | overZero">
+			<section id="main" data-show=". | length | overZero">
+				<input id="toggle-all" type="checkbox" data-on-click=":toggle" data-checked=":allCompleted < . .child" data-show=":all < . | length | overZero">
 				<label for="toggle-all">Mark all as complete</label>
 				<ul id="todo-list">
-
-					<li data-each-todo=":todos < .items .mode" data-class-completed="todo.completed" data-class-editing="todo.editable">
+					<li data-each-todo=":todos < . .mode" data-class-completed="todo.completed" data-class-editing="todo.editable">
 						<div class="view">
 							<input class="toggle" type="checkbox" data-checked="todo.completed">
-							<label data-text="todo.title" data-on-dblclick="todo:editable"></label>
+							<label data-text="todo.title" data-on-dblclick="todo:setEditable"></label>
 							<button class="destroy" data-on-click="todo:destroy"></button>
 						</div>
-						<input class="edit" data-value="todo.title" data-on-change="todo:uneditable">
+						<input class="edit" data-value="todo.title" data-on-blur="todo:save" data-on-change="todo:save">
 					</li>
-
 				</ul>
 			</section>
-
-			<footer id="footer" data-show=":all < .items | length | overZero">
+			<footer id="footer" data-show=":all < . .child | length | overZero">
 				<span id="todo-count">
-					<strong data-text=":active < .items | length"></strong>
-					 item<span data-show=":active < .items | length | plural">s</span> left
+					<strong data-text=":active < . .child | length"></strong>
+					 item<span data-show=":active < . .child | length | plural">s</span> left
 				</span>
 				<ul id="filters">
 					<li>
@@ -49,14 +46,15 @@ <h1>todos</h1>
 						<a href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" data-on-click=":clear" data-show=":completed < .items | length | overZero">Clear completed (<span data-text=":completed < .items | length"></span>)
+				<button id="clear-completed" data-on-click=":clear" data-show=":completed < . .child | length | overZero">Clear completed (<span data-text=":completed < . .child | length"></span>)
 				</button>
 			</footer>
 		</section>
 	</div>
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
 		<p>Created by <a href="http://github.com/Contra">Contra</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
 
 	<script src="../../../assets/base.js"></script>

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

@@ -9,32 +9,37 @@
 		//Bind Todos to DOM
 		Todos.bind($('#content'));
 
+		$('#content').on('dblclick', '.view > label', function(){
+			$(this).parent().siblings('input').focus();
+		});
+
 		//Load previous todos
 		var todos = storage.load('todos-dermis');
 		if(todos){
 			todos.forEach(function(todo){
-				todo.editable = false;
-				Todos.push(Todo.create().set(todo));
+				Todos.push(Todo.create({collection:Todos})
+					.set(todo)
+					.set({editable:false}));
 			});
 		}
 
 		//Save when todos modified
-		Todos.on('change:items', function(){
+		var save = function(){
 			storage.save('todos-dermis', Todos.serialize());
-		});
+		};
+		Todos.on('change',save).on('change:child',save);
 
 		//Add todo when box submitted
 		var box = $('#new-todo');
 		box.change(function(){
 			var title = box.val().trim();
 			if(title.length === 0) return;
-			Todos.push(Todo.create()
-			.set({
-				title: title,
-				completed: false,
-				active: true,
-				editable: false
-			}));
+			Todos.push(Todo.create({collection:Todos})
+				.set({
+					title: title,
+					completed: false,
+					editable: false
+				}));
 			box.val('');
 		});
 	});