Commit eda954f4 authored by Contra's avatar Contra Committed by Sindre Sorhus

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

parent 7ffb0a02
......@@ -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>
......
......@@ -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
......
......@@ -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
......@@ -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('');
});
});
......
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;
......
......@@ -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;
}
......
......@@ -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)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment