2013-07-29 11:23:56 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2013-08-06 06:15:26 +08:00
|
|
|
<head>
|
|
|
|
|
<title>Todo</title>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<script src="../dist/seed.js"></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.red {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
2013-08-04 14:23:52 +08:00
|
|
|
.done {
|
2013-08-02 11:44:12 +08:00
|
|
|
text-decoration: line-through;
|
2013-08-04 14:23:52 +08:00
|
|
|
}
|
|
|
|
|
#app.all .all {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#app.remaining .todo.done {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#app.remaining .remaining {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#app.completed .todo:not(.done) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#app.completed .completed {
|
|
|
|
|
font-weight: bold;
|
2013-08-02 11:44:12 +08:00
|
|
|
}
|
2013-08-06 06:15:26 +08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-08-06 09:43:59 +08:00
|
|
|
<div id="app" sd-controller="Todos" sd-class="filter">
|
2013-08-04 14:23:52 +08:00
|
|
|
<div>
|
|
|
|
|
<input placeholder="What needs to be done?" sd-on="change:addTodo">
|
|
|
|
|
</div>
|
2013-08-01 07:02:41 +08:00
|
|
|
<ul sd-show="todos">
|
2013-08-06 06:15:26 +08:00
|
|
|
<li class="todo" sd-each="todo:todos" sd-class="done:todo.done">
|
2013-08-04 14:23:52 +08:00
|
|
|
<input type="checkbox" sd-checked="todo.done" sd-on="change:toggleTodo">
|
|
|
|
|
<span sd-text="todo.text"></span>
|
|
|
|
|
<a sd-on="click:removeTodo">X</a>
|
|
|
|
|
</li>
|
2013-08-01 07:02:41 +08:00
|
|
|
</ul>
|
2013-08-04 14:23:52 +08:00
|
|
|
<div id="footer">
|
2013-08-06 06:15:26 +08:00
|
|
|
Total: <span sd-text="total < todos"></span> |
|
2013-08-07 06:29:22 +08:00
|
|
|
Remaining: <span sd-text="remaining < completed"></span> |
|
|
|
|
|
Completed: <span sd-text="completed"></span>
|
2013-08-06 06:15:26 +08:00
|
|
|
<br>
|
2013-08-04 14:36:15 +08:00
|
|
|
<a class="all" sd-on="click:setFilter">Show All</a> |
|
|
|
|
|
<a class="remaining" sd-on="click:setFilter">Show Remaining</a> |
|
|
|
|
|
<a class="completed" sd-on="click:setFilter">Show Completed</a>
|
2013-08-07 06:29:22 +08:00
|
|
|
<br>
|
|
|
|
|
<a sd-on="click:removeCompleted">Remove Completed</a>
|
2013-08-04 14:23:52 +08:00
|
|
|
</div>
|
2013-08-06 06:15:26 +08:00
|
|
|
|
2013-07-29 11:23:56 +08:00
|
|
|
</div>
|
2013-08-06 06:15:26 +08:00
|
|
|
<script>
|
2013-08-02 11:44:12 +08:00
|
|
|
|
2013-08-06 06:15:26 +08:00
|
|
|
var Seed = require('seed')
|
2013-08-03 08:09:38 +08:00
|
|
|
|
2013-08-06 06:15:26 +08:00
|
|
|
var todos = [
|
|
|
|
|
{ text: 'make nesting controllers work', done: true },
|
|
|
|
|
{ text: 'complete ArrayWatcher', done: false },
|
|
|
|
|
{ text: 'computed properties', done: false },
|
|
|
|
|
{ text: 'parse textnodes', done: false }
|
|
|
|
|
]
|
2013-08-04 14:23:52 +08:00
|
|
|
|
2013-08-07 01:28:34 +08:00
|
|
|
Seed.controller('Todos', function (scope) {
|
2013-08-04 14:23:52 +08:00
|
|
|
|
2013-08-06 06:15:26 +08:00
|
|
|
// regular properties
|
2013-08-06 09:43:59 +08:00
|
|
|
scope.todos = todos
|
2013-08-04 14:36:15 +08:00
|
|
|
scope.filter = 'all'
|
2013-08-07 06:29:22 +08:00
|
|
|
scope.completed = todos.reduce(function (count, todo) {
|
|
|
|
|
return count + (todo.done ? 1 : 0)
|
2013-08-04 14:23:52 +08:00
|
|
|
}, 0)
|
|
|
|
|
|
2013-08-06 06:15:26 +08:00
|
|
|
// computed properties
|
|
|
|
|
scope.total = function () {
|
|
|
|
|
return scope.todos.length
|
|
|
|
|
}
|
|
|
|
|
|
2013-08-07 06:29:22 +08:00
|
|
|
scope.remaining = function () {
|
|
|
|
|
return scope.todos.length - scope.completed
|
2013-08-06 06:15:26 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// event handlers
|
2013-08-04 14:23:52 +08:00
|
|
|
scope.addTodo = function (e) {
|
2013-08-07 01:28:34 +08:00
|
|
|
var val = e.el.value
|
|
|
|
|
if (val) {
|
2013-08-04 14:23:52 +08:00
|
|
|
e.el.value = ''
|
2013-08-07 01:28:34 +08:00
|
|
|
scope.todos.unshift({ text: val, done: false })
|
2013-08-04 14:23:52 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.removeTodo = function (e) {
|
2013-08-07 06:29:22 +08:00
|
|
|
scope.todos.remove(e.scope)
|
|
|
|
|
scope.completed -= e.scope.done ? 1 : 0
|
2013-08-04 14:23:52 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.toggleTodo = function (e) {
|
2013-08-07 06:29:22 +08:00
|
|
|
scope.completed += e.scope.done ? 1 : -1
|
2013-08-04 14:23:52 +08:00
|
|
|
}
|
|
|
|
|
|
2013-08-04 14:36:15 +08:00
|
|
|
scope.setFilter = function (e) {
|
|
|
|
|
scope.filter = e.el.className
|
2013-08-04 14:23:52 +08:00
|
|
|
}
|
|
|
|
|
|
2013-08-07 06:29:22 +08:00
|
|
|
scope.removeCompleted = function () {
|
|
|
|
|
scope.todos = scope.todos.filter(function (todo) {
|
|
|
|
|
return !todo.done
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2013-08-01 12:34:57 +08:00
|
|
|
})
|
2013-08-01 07:02:41 +08:00
|
|
|
|
2013-08-06 09:43:59 +08:00
|
|
|
var app = Seed.bootstrap()
|
2013-08-06 06:15:26 +08:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2013-07-29 11:23:56 +08:00
|
|
|
</html>
|
