Examples

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 = ""