Fixes for dermis app + add to index. Closes #302

index.html

@@ -184,6 +184,9 @@
 					<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,24 +16,24 @@
 			<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>
@@ -46,7 +46,7 @@
 						<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>
@@ -56,10 +56,11 @@
 		<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>
 	<script src="../../../assets/jquery.min.js"></script>
 	<script src="../../../assets/require.min.js"></script>
 	<script src="js/lib/dermis.js"></script>
 	<script src="js/app.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file

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('');
 		});
 	});

labs/architecture-examples/dermis/js/models/Todo.js

 define(function(){
 	var Todo = dermis.model({
-		editable: function(){
+		setEditable: function(){
 			this.set('editable', true);
 		},
-		uneditable: function(){
+		save: function(){
 			this.set('editable', false);
 			var title = this.get('title').trim();
-			if(title.length === 0) this.destroy();
+			if(title.length === 0) {
+				var todo = this;
+				setTimeout(function(){
+					todo.destroy();
+				}, 1);
+			}
 		},
 		destroy: function(){
-			this.set('active', false);
+			this.collection.remove(this);
+		},
+		serialize: function(){
+			return {
+				title: this.get('title'),
+				completed: this.get('completed')
+			};
 		}
 	});
 	return Todo;

labs/architecture-examples/dermis/js/models/Todos.js

@@ -24,11 +24,7 @@ define(function(Todo){
 		},
 
 		all: function(){
-			var out = [];
-			this.get('items').forEach(function(todo){
-				if (todo.get('active')) out.push(todo);
-			});
-			return out;
+			return this.get('items');
 		},
 		completed: function(){
 			var out = [];
@@ -48,7 +44,7 @@ define(function(Todo){
 		serialize: function(){
 			var out = [];
 			this.all().forEach(function(todo){
-				out.push(todo.getAll());
+				out.push(todo.serialize());
 			});
 			return out;
 		}

readme.md

@@ -50,6 +50,7 @@ We also have a number of in-progress applications in Labs:
 - [Ext.js](http://www.sencha.com/products/extjs)
 - [Sammy.js](http://sammyjs.org)
 - [JavaScriptMVC](http://javascriptmvc.com)
+- [dermis](https://github.com/wearefractal/dermis)
 - [Stapes.js](http://hay.github.com/stapes)
 - [Epitome](http://dimitarchristoff.github.com/Epitome)
 - [TroopJS](https://github.com/troopjs)