var state = { todos: [ {text: 'Primum', complete: true}, {text: 'Secundo', complete: false}, {text: 'Tertium', complete: false} ] }; var view = Monkberry.render(Template, document.body); view.update(state); view.on('submit', 'form', function (event) { event.preventDefault(); var input = view.querySelector('input[type="text"]'); 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 type="text/monkberry" id="Template"> <ol> {% for i, todo of todos %} <li> <input type="checkbox" checked="{{ todo.complete }}" data-index="{{ i }}"> {% if todo.complete %} <del>{{ todo.text }}</del> {% else %} <em>{{ todo.text }}</em> {% endif %} </li> {% endfor %} </ol> <form> <input type="text"> <button type="submit">Add #{{ todos.length + 1 }}</button> </form> </script>