Permalink
Browse files

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

  • Loading branch information...
1 parent 7ffb0a0 commit eda954f4e0eabd6c15c54361c1b1ea90a3ef7635 @contra contra committed with sindresorhus Oct 23, 2012
View
@@ -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>
@@ -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 @@ <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>
@@ -46,7 +46,7 @@ <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>
@@ -56,10 +56,11 @@ <h1>todos</h1>
<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>
@@ -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('');
});
});
Oops, something went wrong.

0 comments on commit eda954f

Please sign in to comment.