git » hoplite.git » commit 1e4949c

diff --git a/el.mjs b/el.mjs
index 45b3f07..c6aea31 100644
--- a/el.mjs
+++ b/el.mjs
@@ -23,25 +23,22 @@ const $el = new Proxy({}, {
   }
 });
 
-function renderChildren(parent, view, klass) {
+// renderChildren lifecycle
+// renderChildren children lifecycle
+// nesting
+function renderChildren(parent, eidView, klass) {
   let children = new Map();
   watch((added, removed) => {
-    for (let [key] of removed) {
-      if (children.has(key)) {
-        parent.removeChild(children.get(key).el);
-        children.delete(key);
-      }
+    for (let [eid] of removed) {
+      parent.removeChild(children.get(eid).el);
+      children.get(eid).destroy();
+      children.delete(eid);
     }
-    for (let tuple of added) {
-      let [key] = tuple;
-      if (!children.has(key)) {
-        children.set(key, new klass(tuple));
-        parent.appendChild(children.get(key).el)
-      } else {
-        children.get(key).update(children.get(key).el, tuple);
-      }
+    for (let [eid] of added) {
+      children.set(eid, new klass(eid));
+      parent.appendChild(children.get(eid).el)
     }
-  })(view);
+  })(eidView);
   return parent;
 }
 
diff --git a/todo.mjs b/todo.mjs
index 80d2f06..e984bb6 100644
--- a/todo.mjs
+++ b/todo.mjs
@@ -1,5 +1,5 @@
 import { _ } from './datalog.mjs';
-import { database, view } from './reactives.mjs';
+import { transaction, database, view, watch } from './reactives.mjs';
 import { $el, renderChildren } from './el.mjs';
 
 let todos = database([
@@ -12,16 +12,41 @@ let todos = database([
 ]);
 
 class TodoItem {
-  constructor([id, text]) {
-    this.el = $el.li(text);
+  constructor(eid) {
+    this.eid = eid;
+    this.el = $el.li(document.createTextNode(""));
+
+    watch(([[newText]]) => {
+      this.el.firstChild.textContent = newText;
+    })(view({
+      find: [_.text],
+      use: [_.eid],
+      where: [[_.eid, "todo/text", _.text]]
+    })(todos, eid));
+
+    watch(([[newState]]) => {
+      if (newState === "done") {
+        this.el.style = "text-decoration: line-through;";
+      } else {
+        this.el.style = "";
+      }
+    })(view({
+      find: [_.status],
+      use: [_.eid],
+      where: [[_.eid, "todo/status", _.status]]
+    })(todos, eid));
+
     this.el.addEventListener('click', e => {
-      // TODO Improve scan
-      todos.remove([...todos].filter(([x]) => x === id));
+      todos.remove([...todos].filter(([eid]) => eid === this.eid));
     });
   }
-  update([id, text]) {
-    this.el.removeChild(this.el.firstChild);
-    this.el.appendChild(document.createTextNode(text));
+  // update([id, text]) {
+  //   this.el.removeChild(this.el.firstChild);
+  //   this.el.appendChild(document.createTextNode(text));
+  // }
+  destroy() {
+    console.log("destroy eid", this.eid);
+    // TODO
   }
 }
 
@@ -29,8 +54,8 @@ function todoList() {
   return renderChildren(
     $el.ul(),
     view({
-      find: [_.id, _.text],
-      where: [[_.id, "todo/text", _.text]]
+      find: [_.id],
+      where: [[_.id, "todo/text", _._]]
     })(todos),
     TodoItem
   );