add datastar examples

2025-12-09 02:30:55 +01:00
parent f6bfd1f7ab
commit 5a43abbdc7
7 changed files with 277 additions and 0 deletions
@@ -0,0 +1,12 @@
+<li id="new-todo-row">
+  <form data-on-submit="@post('/todo')">
+    <input
+      type="text"
+      name="name"
+      data-bind-newtodo
+      placeholder="Nueva tarea..."
+      autofocus
+    />
+    <button type="submit">enviar</button>
+  </form>
+</li>
@@ -0,0 +1,15 @@
+<li id="todo-{{ .ID }}">
+  <button
+    {{
+    if
+    .Completed
+    }}
+    disabled
+    {{
+    end
+    }}
+    data-on-click="@patch('/todo/{{.ID}}/completed')"
+  >
+    {{ .ID }} {{ .Name }} - {{ .Completed }}
+  </button>
+</li>
@@ -0,0 +1,9 @@
+<div id="todo-container">
+  <h2>Listado de tareas</h2>
+
+  <button data-on-click="@get('/todo/new')">Nueva tarea</button>
+
+  <ol id="todo-list-body">
+    {{ range .TodoList }} {{ template "fragments/todo-row" . }} {{ end }}
+  </ol>
+</div>
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Lista de tareas</title>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
+    ></script>
+  </head>
+  <body>
+    <div data-on-load="@get('/todo')" id="todo-container">Cargando...</div>
+  </body>
+</html>