TodoMVC

Demo
3 items pending

Explanation #

This is a full implementation of TodoMVC using Datastar. It demonstrates complex state management, including adding, editing, deleting, and filtering todos, all handled through server-sent events.

HTML #

 1<section
 2    id="todomvc"
 3    data-on-load="@get('/examples/todomvc/updates')"
 4>
 5    <header id="todo-header">
 6        <input
 7            type="checkbox"
 8            data-on-click__prevent="@post('/examples/todomvc/-1/toggle')"
 9            data-on-load="el.checked = false"
10        />
11        <input
12            id="new-todo"
13            type="text"
14            placeholder="What needs to be done?"
15            data-signals-input
16            data-bind-input
17            data-on-keydown="
18                evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
19            "
20        />
21    </header>
22    <ul id="todo-list">
23        <!-- Todo items are dynamically rendered here -->
24    </ul>
25    <div id="todo-actions">
26        <span>
27            <strong>0</strong> items pending
28        </span>
29        <button class="small info" data-on-click="@put('/examples/todomvc/mode/0')">
30            All
31        </button>
32        <button class="small" data-on-click="@put('/examples/todomvc/mode/1')">
33            Pending
34        </button>
35        <button class="small" data-on-click="@put('/examples/todomvc/mode/2')">
36            Completed
37        </button>
38        <button class="error small" aria-disabled="true">
39            Delete
40        </button>
41        <button class="warning small" data-on-click="@put('/examples/todomvc/reset')">
42            Reset
43        </button>
44    </div>
45</section>