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
35
36
37
38
39
40
41
42
43
44
45
|
local component = require 'mmm.component'
local ReactiveVar, text, e = component.ReactiveVar, component.text, component.elements
local parent = e.div()
local function todoItem(desc, done)
-- convert into reactive data sources
local desc, done = ReactiveVar(desc), ReactiveVar(done)
local me = e.div{
style = {
margin = '8px',
padding = '8px',
background = '#eeeeee',
},
e.h3{ desc:map(text), style = 'margin: 0;' },
e.span(done:map(function (done)
if done then
return text 'done'
else
return text 'not done yet'
end
end)),
e.input{ type = 'checkbox', checked = done, onchange = function(_, e) done:set(e.target.checked) end },
e.a{ text 'delete', href = '#', onclick = function() parent:remove(me) end }
}
return me
end
parent:append(todoItem('write a Component System', true))
parent:append(todoItem('eat Lasagna', true))
parent:append(todoItem('do other things'))
local desc = ReactiveVar 'start'
local form = e.form{
action = '',
style = { margin = '2px' },
onsubmit = function(_, e)
e:preventDefault()
parent:append(todoItem(desc:get()))
desc:set ''
end,
}
form:append(e.input{ type = 'text', value = desc, onchange = function(_, e) desc:set(e.target.value) end })
form:append(e.input{ type = 'submit', value = 'add' })
return e.article(parent, form)
|
