WIP XXX

examples/unfinished/shark/client/shark.js

@@ -13,6 +13,11 @@ IfComponent = Component.extend({
   }
 });
 
+Items = new Meteor.Collection(null);
+Items.insert({ text: 'Foo' });
+Items.insert({ text: 'Bar' });
+Items.insert({ text: 'Baz' });
+
 Meteor.startup(function () {
   /*
   RC = RootComponent.create({
@@ -23,7 +28,7 @@ Meteor.startup(function () {
     })
   });
  */
-  RC = RootComponent.create({
+  /*RC = RootComponent.create({
     bodyClass: Component.extend({
       render: function (buf) {
         buf.openTag('span', {style: function () {
@@ -36,7 +41,25 @@ Meteor.startup(function () {
         buf.closeTag('span');
       }
     })
+  });*/
+
+  RC = RootComponent.create({
+    bodyClass: Component.extend({
+      render: function (buf) {
+        buf.component(Each.create({
+          bodyClass: Component.extend({
+            render: function (buf) {
+              buf.openTag('div');
+              buf.text(this.getArg('data').text || '');
+              buf.closeTag('div');
+            }
+          }),
+          list: Items.find()
+        }), { key: 'body' });
+      }
+    })
   });
+
   RC.attach(document.body);
 });
 
@@ -210,9 +233,12 @@ Each = Component.extend({
         var doc = EJSON.clone(item);
         doc._id = id;
         items.putBefore(id, doc, beforeId);
-        //var tdoc = transformedDoc(doc);
 
-        //self.itemAddedBefore(id, tdoc, beforeId);
+        if (self.stage === Component.BUILT) {
+          var tdoc = transformedDoc(doc);
+
+          self.itemAddedBefore(id, tdoc, beforeId);
+        }
       },
       removed: function (id) {
         //items.remove(id);
@@ -235,10 +261,10 @@ Each = Component.extend({
       }
     });
 
-    if (items.empty) {
+    if (items.empty()) {
       buf.component(function () {
         return (self.getArg('elseClass') || Component).create(
-          { data: this.getArg('data') });
+          { data: self.getArg('data') });
       }, { key: 'else' });
     } else {
       items.forEach(function (doc, id) {
@@ -246,14 +272,14 @@ Each = Component.extend({
 
         buf.component(function () {
           return self.getArg('bodyClass').create({ data: tdoc });
-        }, { key: this._itemChildId(id) });
+        }, { key: self._itemChildId(id) });
       });
     }
   },
 
   _itemChildId: function (id) {
     return 'item:' + idStringify(id);
-  }
+  },
   /*
   addItemChild: function (id, comp) {
     this.addChild(this._itemChildId(id), comp);
@@ -284,11 +310,22 @@ Each = Component.extend({
       this.setStart(comp);
     if (isLast)
       this.setEnd(comp);
-  },
+  },*/
 
   itemAddedBefore: function (id, doc, beforeId) {
-    var bodyClass = this.getArg('bodyClass');
-    var comp = new bodyClass({data: doc});
+    var self = this;
+
+    var childId = self._itemChildId(id);
+    var comp = self.getArg('bodyClass').create({data: doc});
+
+    if (self.items.size() === 1) {
+      // was empty
+      self.replaceChild('else', comp, childId);
+    } else {
+      self.addChild(childId, comp // XXXXXX
+    }
+
+
     this.addItemChild(id, comp);
 
     if (this.isBuilt) {
@@ -298,7 +335,8 @@ Each = Component.extend({
         // was empty
         this.removeChild('else');
     }
-  },
+  }
+  /*
   itemRemoved: function (id) {
     if (this.items.size() === 1) {
       // making empty

packages/ui/component.js

@@ -429,7 +429,7 @@ _.extend(Component.prototype, {
 
     childComponent.destroy();
   },
-  replaceChild: function (key, newChild) {
+  replaceChild: function (key, newChild, newKey) {
     if (this.stage === Component.DESTROYED)
       throw new Error("parent Component already destroyed");
     if (this.stage === Component.UNADDED)
@@ -441,21 +441,25 @@ _.extend(Component.prototype, {
     if (! (newChild instanceof Component))
       throw new Error("Component required");
 
+    if ((typeof newKey) !== 'string')
+      newKey = key;
+
     var oldChild = this.children[key];
 
-    if (oldChild.constructor === newChild.constructor) {
+    if (newKey === key &&
+        oldChild.constructor === newChild.constructor) {
       oldChild.update(newChild._args);
     } else if (this.stage !== Component.BUILT ||
                oldChild !== Component.BUILT ||
                ! oldChild.isAttached) {
       this.removeChild(key);
-      this.addChild(key, newChild);
+      this.addChild(newKey, newChild);
     } else {
       // swap attached child
       var parentNode = oldChild.parentNode();
       var beforeNode = oldChild.lastNode().nextSibling;
       this.removeChild(key, true);
-      this.addChild(key, newChild, parentNode, beforeNode);
+      this.addChild(newKey, newChild, parentNode, beforeNode);
     }
   },
   registerElement: function (elementKey, element) {