ion
Version:
ion language ========================
118 lines (115 loc) • 5.85 kB
HTML
<html>
<head>
<title>Ion • TodoMVC</title>
<script src="/scripts.js"></script>
<link rel="stylesheet" href="TodoMVC.css">
</head>
<body>
<div>
<script type='ion'>
# we will define the model globally as tasks variable`
# so that we can manipulate it from the developer console
# you can test this from the console:
# tasks.push({name:'Use Ion', complete:false})
global.tasks = JSON.parse(localStorage.tasks ? "[]")
ion.patch.watch(tasks, -> localStorage.tasks = JSON.stringify(tasks))
let filters =
all: (task) -> true
active: (task) -> not task.complete
completed: (task) -> task.complete
# now define the reactive view template
return template ->
let count = tasks.length
let completed = tasks.filter((task) -> task.complete).length
let remaining = count - completed
let state =
filter: 'all'
editing: null
return Section(id:'todoapp')
Header(id:'header')
H1()
'todos'
Form()
let nameField = Input(id:'new-todo', placeholder:'What needs to be done?')
nameField
submit(e) ->
e.preventDefault()
let value = nameField.value.trim()
if value.length > 0
tasks.unshift(name:value,complete:false)
nameField.value = ''
nameField.select()
Section(id:'main')
Input(id:'toggle-all',type:'checkbox')
change(e) ->
for task in tasks
task.complete = @checked
Ul(id:'todo-list')
let filter = filters[state.filter]
for task, index in tasks
if filter(task)
let {name,complete} = task
Li()
click(e) ->
if e.detail is 2
state.editing = index
classList:
if complete
'completed'
style:
order: index
Input(class:'toggle',type:'checkbox')
checked: complete
change(e) ->
task.complete = @checked
Label()
if state.editing is index
let editor = Input()
change(e) ->
let name = @value.trim()
if name.length > 0
task.name = name
state.editing = false
value: name
editor
void editor.select()
else
name
Button(class:'destroy')
click(e) ->
tasks.splice(index, 1)
Footer(id:'footer')
style:
display: count > 0 ? 'initial': 'none'
Span(id:'todo-count')
Strong()
remaining
" item{{remaining isnt 1 ? 's' : ''}} left"
Ul({id:'filters'})
for name of filters
Li()
A()
classList:
if state.filter is name
'selected'
click(e) ->
state.filter = name
name
Button(id:'clear')
style:
display: completed > 0 ? 'initial': 'none'
click(e) ->
# iterate tasks in reverse, remove any complete
for let i = tasks.length - 1; i >= 0; i--
if tasks[i].complete
tasks.splice(i, 1)
"Clear completed {{completed}}"
</script>
</div>
<footer id="info">
<p>Double-click to edit A todo</p>
<p>Created by <A href="https://github.com/krisnye/ion">The Ion Author</A></p>
<p>Part of <A href="http://todomvc.com">TodoMVC</A></p>
</footer>
</body>
</html>