-
Notifications
You must be signed in to change notification settings - Fork 5
/
example.html
82 lines (77 loc) · 3.05 KB
/
example.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<script
defer
src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data id="content">
<p>
{{ fir.Error "onload" }}
</p>
<p @fir:create:error="$fir.replace()">
{{ fir.Error "create" }}
</p>
<div
@fir:create:pending="console.log('create todo start')"
@fir:create:ok="console.log('create todo done')"></div>
<form
id="create"
x-ref="create"
method="post"
action="/?event=create"
@submit.prevent="$fir.submit()"
@fir:create:ok.nohtml="$refs.create.reset()"
style="margin-top:1rem;margin-bottom:1rem;">
<input type="text" name="text" placeholder="a new todo" />
<p @fir:create:error="$fir.replace()">
{{ fir.Error "create.text" }}
</p>
<button type="submit">new</button>
</form>
<div @fir:create:ok::todo="$fir.appendEl()">
{{ range .todos }}
{{ block "todo" . }}
<div
fir-key="{{ .ID }}"
@fir:delete:ok="$fir.removeEl()"
style="display: flex;margin-top:1rem;margin-bottom:1rem;">
<div id="todo-{{ .ID }}" style="margin-right:1rem">
{{ .Text }}
</div>
<div
@fir:toggle-done:ok="$fir.replace()"
style="margin-right:1rem">
Done:
{{ .Done }}
</div>
<form
method="post"
@submit.prevent="$fir.submit()"
style="margin-right:1rem">
<input
type="hidden"
name="todoID"
value="{{ .ID }}" />
<button
formaction="/?event=toggle-done"
type="submit">
Toggle Done
</button>
<button
formaction="/?event=delete"
type="submit">
Delete
</button>
</form>
</div>
{{ end }}
{{ end }}
</div>
</div>
</body>
</html>