ion
Version:
ion language ========================
71 lines (69 loc) • 2.89 kB
HTML
<html>
<head>
<title>Ion Reactive Samples</title>
<script src="/scripts.js"></script>
<style>
.description { margin: 1em; }
.sample { background: #eeeeee; }
</style>
</head>
<body>
<div>
<h2>Todo Sample</h2>
<div class='sample'>
<script type='ion'>
# we will define the model globally as tasks variable`
# so that we can manipulate it from the developer console
global.tasks =
Alpha: true
Beta: false
Charlie: false
# now define the reactive view template
return template ->
return Div()
Div()
"tasks: {{ JSON.stringify(tasks) }}"
Div()
for name, complete of tasks
Div()
Input()
type: 'checkbox'
checked: complete
change(e) ->
tasks[name] = @checked
Span()
style:
display: 'inline-block'
width: '10em'
name
Button()
"\u2212"
click(e) ->
delete tasks[name]
Div()
Form()
let nameInput = Input()
width: '10em'
submit(e) ->
e.preventDefault()
let name = nameInput.value.trim()
if name.length > 0
tasks[name] = false
nameInput.select()
Input()
type: 'checkbox'
style:
visibility: 'hidden'
Span()
style:
display: 'inline-block'
width: '10em'
nameInput
Button()
type: 'submit'
"+"
</script>
</div>
</div>
</body>
</html>