1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import ReactiveVar, text, elements from require 'mmm.component'
import article, div, form, span, h3, a, input from elements
parent = div!
todoItem = (desc, done) ->
-- convert into reactive data sources
desc, done = (ReactiveVar desc), ReactiveVar done
with me = div style:
margin: '8px'
padding: '8px'
background: '#eeeeee'
\append h3 (desc\map text), style: 'margin: 0;'
\append span done\map (done) -> text if done then 'done' else 'not done yet'
\append input type: 'checkbox', checked: done, onchange: (e) => done\set e.target.checked
\append a (text 'delete'), href: '#', onclick: (e) => parent\remove me
parent\append todoItem 'write a Component System', true
parent\append todoItem 'eat Lasagna', true
parent\append todoItem 'do other things'
desc = ReactiveVar 'start'
form = with form {
action: ''
style:
margin: '2px'
onsubmit: (e) =>
e\preventDefault!
parent\append todoItem desc\get!
desc\set ''
}
\append input type: 'text', value: desc, onchange: (e) => desc\set e.target.value
\append input type: 'submit', value: 'add'
article parent, form
|
