Skip to content

Instantly share code, notes, and snippets.

@cablehead
Created September 3, 2025 12:13
Show Gist options
  • Save cablehead/9c5a0fe4de952767bee7b8bd510e8c77 to your computer and use it in GitHub Desktop.
Save cablehead/9c5a0fe4de952767bee7b8bd510e8c77 to your computer and use it in GitHub Desktop.
example stream for the datastar todomvc guide: https://data-star.dev/examples/todomvc
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>3</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/4&#39;)"><input id="todo-checkbox-4" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/4/toggle&#39;)"> <label for="todo-checkbox-4">TPL report</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/4&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>4</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/4&#39;)"><input id="todo-checkbox-4" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/4/toggle&#39;)"> <label for="todo-checkbox-4">TPL report</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/4&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>5</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" aria-disabled="true"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/4&#39;)"><input id="todo-checkbox-4" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/4/toggle&#39;)"> <label for="todo-checkbox-4">TPL report</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/4&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>4</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/4&#39;)"><input id="todo-checkbox-4" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/4/toggle&#39;)"> <label for="todo-checkbox-4">TPL report</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/4&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>4</strong> items pending</span> <button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/4&#39;)"><input id="todo-checkbox-4" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/4/toggle&#39;)"> <label for="todo-checkbox-4">TPL report</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/4&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>4</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>4</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" aria-disabled="true"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
event: datastar-patch-elements
data: elements <section id="todomvc" data-on-load="@get('/examples/todomvc/updates')"><header id="todo-header"><input type="checkbox" data-on-click__prevent="@post('/examples/todomvc/-1/toggle')" data-on-load="el.checked = false"> <input id="new-todo" type="text" placeholder="What needs to be done?" data-signals-input data-bind-input data-on-keydown="
data: elements evt.key === 'Enter' && $input.trim() && @patch('/examples/todomvc/-1') && ($input = '');
data: elements "></header><ul id="todo-list"><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/0&#39;)"><input id="todo-checkbox-0" type="checkbox" data-on-load="el.checked = true" data-on-click__prevent="@post(&#39;/examples/todomvc/0/toggle&#39;)"> <label for="todo-checkbox-0">Learn any backend language</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/0&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/1&#39;)"><input id="todo-checkbox-1" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/1/toggle&#39;)"> <label for="todo-checkbox-1">Learn Datastar</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/1&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/2&#39;)"><input id="todo-checkbox-2" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/2/toggle&#39;)"> <label for="todo-checkbox-2">???</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/2&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li><li role="button" tabindex="0" data-on-dblclick="evt.target === el &amp;&amp; @get(&#39;/examples/todomvc/3&#39;)"><input id="todo-checkbox-3" type="checkbox" data-on-load="el.checked = false" data-on-click__prevent="@post(&#39;/examples/todomvc/3/toggle&#39;)"> <label for="todo-checkbox-3">Profit</label> <button class="error small" data-on-click="@delete(&#39;/examples/todomvc/3&#39;)"><iconify-icon icon="pixelarticons:close" noobserver=""></iconify-icon></button></li></ul><div id="todo-actions"><span><strong>3</strong> items pending</span> <button class="small info" data-on-click="@put(&#39;/examples/todomvc/mode/0&#39;)">All</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/1&#39;)">Pending</button><button class="small" data-on-click="@put(&#39;/examples/todomvc/mode/2&#39;)">Completed</button> <button class="error small" data-on-click="@delete('/examples/todomvc/-1')"><iconify-icon icon="pixelarticons:trash" noobserver=""></iconify-icon>Delete</button> <button class="warning small" data-on-click="@put('/examples/todomvc/reset')"><iconify-icon icon="pixelarticons:reload" noobserver=""></iconify-icon>Reset</button></div></section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment