Examples
Note that all examples are deliberately left unstyled to present the simplest implementation.
Todo
No tasks 🎉
Source
<!-- unicorn/templates/unicorn/todo.html -->
<div>
<form unicorn:submit.prevent="add">
<input type="text" unicorn:model.lazy="task" placeholder="New task" id="task"></input>
</form>
<button unicorn:click="add">Add</button>
<p>
{% if tasks %}
<ul>
{% for task in tasks %}
<li>{{ task }}</li>
{% endfor %}
</ul>
<button unicorn:click="$reset">Clear all tasks</button>
{% else %}
No tasks 🎉
{% endif %}
</p>
</div>
# unicorn/components/todo.py
from django_unicorn.components import UnicornView
class TodoView(UnicornView):
task = ""
tasks = []
def add(self):
self.tasks.append(self.task)
self.task = ""