git » hoplite.git » commit 7fae4d9

diff --git a/el.mjs b/el.mjs
index 3e924dc..45b3f07 100644
--- a/el.mjs
+++ b/el.mjs
@@ -23,22 +23,22 @@ const $el = new Proxy({}, {
   }
 });
 
-function renderChildren(parent, view, constructor) {
+function renderChildren(parent, view, klass) {
   let children = new Map();
   watch((added, removed) => {
     for (let [key] of removed) {
       if (children.has(key)) {
-        parent.removeChild(children.get(key).element);
+        parent.removeChild(children.get(key).el);
         children.delete(key);
       }
     }
     for (let tuple of added) {
       let [key] = tuple;
       if (!children.has(key)) {
-        children.set(key, constructor(tuple));
-        parent.appendChild(children.get(key).element)
+        children.set(key, new klass(tuple));
+        parent.appendChild(children.get(key).el)
       } else {
-        children.get(key).update(children.get(key).element, tuple);
+        children.get(key).update(children.get(key).el, tuple);
       }
     }
   })(view);
diff --git a/todo.mjs b/todo.mjs
index caa72b0..80d2f06 100644
--- a/todo.mjs
+++ b/todo.mjs
@@ -11,6 +11,20 @@ let todos = database([
   [2, "todo/status", "done"]
 ]);
 
+class TodoItem {
+  constructor([id, text]) {
+    this.el = $el.li(text);
+    this.el.addEventListener('click', e => {
+      // TODO Improve scan
+      todos.remove([...todos].filter(([x]) => x === id));
+    });
+  }
+  update([id, text]) {
+    this.el.removeChild(this.el.firstChild);
+    this.el.appendChild(document.createTextNode(text));
+  }
+}
+
 function todoList() {
   return renderChildren(
     $el.ul(),
@@ -18,13 +32,7 @@ function todoList() {
       find: [_.id, _.text],
       where: [[_.id, "todo/text", _.text]]
     })(todos),
-    ([id, text]) => ({
-      element: $el.li(text),
-      update: (el, [id, text]) => {
-        el.removeChild(el.firstChild);
-        el.appendChild(document.createTextNode(text));
-      }
-    })
+    TodoItem
   );
 }