2013-08-14 06:53:29 +08:00
|
|
|
var filters = {
|
2013-08-25 15:07:48 +08:00
|
|
|
all: function (todo) { return todo.completed || true },
|
|
|
|
|
active: function (todo) { return !todo.completed },
|
|
|
|
|
completed: function (todo) { return todo.completed }
|
2013-08-14 06:53:29 +08:00
|
|
|
}
|
|
|
|
|
|
2013-08-21 03:18:41 +08:00
|
|
|
var Todos = seed.ViewModel.extend({
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-16 09:41:02 +08:00
|
|
|
init: function () {
|
2013-08-24 02:51:49 +08:00
|
|
|
this.todos = todoStorage.fetch()
|
2013-08-25 15:07:48 +08:00
|
|
|
this.remaining = this.todos.filter(filters.active).length
|
2013-08-16 00:26:13 +08:00
|
|
|
this.updateFilter()
|
2013-08-14 06:53:29 +08:00
|
|
|
},
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-10-12 05:46:28 +08:00
|
|
|
proto: {
|
2013-08-15 12:39:32 +08:00
|
|
|
|
|
|
|
|
updateFilter: function () {
|
|
|
|
|
var filter = location.hash.slice(2)
|
|
|
|
|
this.filter = (filter in filters) ? filter : 'all'
|
2013-08-25 14:38:44 +08:00
|
|
|
this.todoFilter = filters[this.filter]
|
2013-08-10 00:18:34 +08:00
|
|
|
},
|
2013-08-09 04:24:28 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
addTodo: function () {
|
|
|
|
|
var value = this.newTodo && this.newTodo.trim()
|
|
|
|
|
if (value) {
|
|
|
|
|
this.todos.unshift({ title: value, completed: false })
|
|
|
|
|
this.newTodo = ''
|
|
|
|
|
this.remaining++
|
2013-08-24 02:51:49 +08:00
|
|
|
todoStorage.save()
|
2013-08-15 12:39:32 +08:00
|
|
|
}
|
|
|
|
|
},
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
removeTodo: function (e) {
|
2013-08-21 03:18:41 +08:00
|
|
|
this.todos.remove(e.item)
|
|
|
|
|
this.remaining -= e.item.completed ? 0 : 1
|
2013-08-24 02:51:49 +08:00
|
|
|
todoStorage.save()
|
2013-08-15 12:39:32 +08:00
|
|
|
},
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
toggleTodo: function (e) {
|
2013-08-21 03:18:41 +08:00
|
|
|
this.remaining += e.item.completed ? -1 : 1
|
2013-08-24 02:51:49 +08:00
|
|
|
todoStorage.save()
|
2013-08-15 12:39:32 +08:00
|
|
|
},
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
editTodo: function (e) {
|
2013-08-21 03:18:41 +08:00
|
|
|
this.beforeEditCache = e.item.title
|
2013-08-26 02:16:13 +08:00
|
|
|
this.editedTodo = e.item
|
2013-08-15 12:39:32 +08:00
|
|
|
},
|
2013-08-11 13:50:32 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
doneEdit: function (e) {
|
2013-08-26 02:16:13 +08:00
|
|
|
if (!this.editedTodo) return
|
|
|
|
|
this.editedTodo = null
|
2013-08-21 03:18:41 +08:00
|
|
|
e.item.title = e.item.title.trim()
|
|
|
|
|
if (!e.item.title) this.removeTodo(e)
|
2013-08-24 02:51:49 +08:00
|
|
|
todoStorage.save()
|
2013-08-15 12:39:32 +08:00
|
|
|
},
|
2013-08-14 06:53:29 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
cancelEdit: function (e) {
|
2013-08-26 02:16:13 +08:00
|
|
|
this.editedTodo = null
|
2013-08-21 03:18:41 +08:00
|
|
|
e.item.title = this.beforeEditCache
|
2013-08-15 12:39:32 +08:00
|
|
|
},
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-15 12:39:32 +08:00
|
|
|
removeCompleted: function () {
|
2013-08-25 15:07:48 +08:00
|
|
|
this.todos.mutateFilter(filters.active)
|
2013-08-24 02:51:49 +08:00
|
|
|
todoStorage.save()
|
2013-08-25 14:38:44 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
allDone: {
|
|
|
|
|
get: function () {
|
|
|
|
|
return this.remaining === 0
|
|
|
|
|
},
|
|
|
|
|
set: function (value) {
|
|
|
|
|
this.todos.forEach(function (todo) {
|
|
|
|
|
todo.completed = value
|
|
|
|
|
})
|
|
|
|
|
this.remaining = value ? 0 : this.todos.length
|
|
|
|
|
todoStorage.save()
|
|
|
|
|
}
|
2013-08-15 12:39:32 +08:00
|
|
|
}
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2013-08-16 00:26:13 +08:00
|
|
|
var app = new Todos({ el: '#todoapp' })
|
|
|
|
|
window.addEventListener('hashchange', function () {
|
|
|
|
|
app.updateFilter()
|
|
|
|
|
})
|