Skip to content

T
todomvc
Commit a7470189 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #301 from Contra/gh-pages 

Add dermis to Labs
parents 618af45c c4cfde8e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 0 deletions
labs/architecture-examples/dermis/README.md 0 → 100644
View file @ a7470189
# Dermis TodoMVC app
A todo app built using [dermis](https://github.com/wearefractal/dermis)
## Run
Start the HTTP server and visit http://localhost/labs/architecture-examples/dermis/
\ No newline at end of file
labs/architecture-examples/dermis/index.html 0 → 100644
View file @ a7470189
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dermis • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<section id="todoapp">
<header id="header">
<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">
<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">
<div class="view">
<input class="toggle" type="checkbox" data-checked="todo.completed">
<label data-text="todo.title" data-on-dblclick="todo:editable"></label>
<button class="destroy" data-on-click="todo:destroy"></button>
</div>
<input class="edit" data-value="todo.title" data-on-change="todo:uneditable">
</li>
</ul>
</section>
<footer id="footer" data-show=":all < .items | length | overZero">
<span id="todo-count">
<strong data-text=":active < .items | length"></strong>
item<span data-show=":active < .items | length | plural">s</span> left
</span>
<ul id="filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<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>
</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>
</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>
\ No newline at end of file
labs/architecture-examples/dermis/js/app.js 0 → 100644
View file @ a7470189
(function( window ) {
'use strict';
dermis.route('/');
dermis.route('/active');
dermis.route('/completed');
require(['js/models/Todo', 'js/models/Todos', 'js/storage'], function(Todo, Todos, storage){
//Bind Todos to DOM
Todos.bind($('#content'));
//Load previous todos
var todos = storage.load('todos-dermis');
if(todos){
todos.forEach(function(todo){
todo.editable = false;
Todos.push(Todo.create().set(todo));
});
}
//Save when todos modified
Todos.on('change:items', function(){
storage.save('todos-dermis', Todos.serialize());
});
//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
}));
box.val('');
});
});
})( window );
\ No newline at end of file
labs/architecture-examples/dermis/js/lib/dermis.js 0 → 100644
View file @ a7470189
This diff is collapsed.
labs/architecture-examples/dermis/js/models/Todo.js 0 → 100644
View file @ a7470189
define(function(){
var Todo = dermis.model({
editable: function(){
this.set('editable', true);
},
uneditable: function(){
this.set('editable', false);
var title = this.get('title').trim();
if(title.length === 0) this.destroy();
},
destroy: function(){
this.set('active', false);
}
});
return Todo;
});
\ No newline at end of file
labs/architecture-examples/dermis/js/models/Todos.js 0 → 100644
View file @ a7470189
define(function(Todo){
var Todos = dermis.collection({
toggle: function(){
var toggled = this.allCompleted();
this.emit('change:toggle');
this.all().forEach(function(todo){
todo.set('completed', !toggled);
});
},
clear: function(){
this.completed().forEach(function(todo){
todo.destroy();
});
},
// These can all be implemented as rivets formatters
allCompleted: function(){
return this.completed().length === this.all().length;
},
todos: function(){
return this[this.get('mode')]();
},
all: function(){
var out = [];
this.get('items').forEach(function(todo){
if (todo.get('active')) out.push(todo);
});
return out;
},
completed: function(){
var out = [];
this.all().forEach(function(todo){
if (todo.get('completed')) out.push(todo);
});
return out;
},
active: function(){
var out = [];
this.all().forEach(function(todo){
if (!todo.get('completed')) out.push(todo);
});
return out;
},
serialize: function(){
var out = [];
this.all().forEach(function(todo){
out.push(todo.getAll());
});
return out;
}
});
Todos.set('mode', 'all');
return Todos;
});
\ No newline at end of file
labs/architecture-examples/dermis/js/storage.js 0 → 100644
View file @ a7470189
define(function(){
var mod = {
load: function(key){
if (!'localStorage' in window) return;
var d = window.localStorage[key];
if (d){
return JSON.parse(d);
} else {
return;
}
},
save: function(key, data){
if (!'localStorage' in window) return;
window.localStorage[key] = JSON.stringify(data);
}
};
return mod;
});
\ No newline at end of file
labs/architecture-examples/dermis/routes/active.js 0 → 100644
View file @ a7470189
define(['js/models/Todo', 'js/models/Todos'], function(Todo, Todos){
var app = {
show: function(){
Todos.set('mode', 'active');
$('.selected').removeClass('selected');
$('a[href$="#/active"]').addClass('selected');
}
};
return app;
});
\ No newline at end of file
labs/architecture-examples/dermis/routes/completed.js 0 → 100644
View file @ a7470189
define(['js/models/Todo', 'js/models/Todos'], function(Todo, Todos){
var app = {
show: function(){
Todos.set('mode', 'completed');
$('.selected').removeClass('selected');
$('a[href$="#/completed"]').addClass('selected');
}
};
return app;
});
\ No newline at end of file
labs/architecture-examples/dermis/routes/index.js 0 → 100644
View file @ a7470189
define(['js/models/Todo', 'js/models/Todos'], function(Todo, Todos){
var app = {
show: function(){
Todos.set('mode', 'all');
$('.selected').removeClass('selected');
$('a[href$="#/"]').addClass('selected');
}
};
return app;
});
\ No newline at end of file
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7