standalone/test.html at master · monkberry/standalone · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monkberry Standalone</title>
</head>
<body>
<script src="monkberry.min.js"></script>
<script type="text/monkberry" id="todos">
    <ol>
        {% for i, todo of todos %}
            <li>
                <input type="checkbox" checked="{{ todo.complete }}" data-index="{{ i }}">
                {% if todo.complete %}
                    <s>{{ todo.text }}</s>
                {% else %}
                    {{ todo.text }}
                {% endif %}
            </li>
        {% endfor %}
    </ol>
    <form>
        <input type="text">
        <button type="submit">Add #{{ todos.length + 1 }}</button>
    </form>
</script>
<script>
    document.addEventListener('DOMContentLoaded', load);

    function load() {
        var state = {
            todos: [
                {text: 'do something', complete: true},
                {text: 'do something more', complete: true},
                {text: 'relax', complete: false}
            ]
        };

        var view = Monkberry.render(todos, document.body);
        var input = view.querySelector('input');

        view.update(state);

        view.on('submit', 'form', function (event) {
            event.preventDefault();
            state.todos.push({text: input.value, complete: false});
            view.update(state);
            input.value = '';
        });

        view.on('click', '[data-index]', function (event) {
            var i = event.target.dataset.index;
            state.todos[i].complete = !state.todos[i].complete;
            view.update(state);
        });
    }
</script>
</body>
</html>