list of components component

examples/unfinished/shark/client/shark.js

@@ -129,3 +129,25 @@ Meteor.startup(function () {
   // leak `c`
   (c = _UI.Counter.create({isRoot:true})).attach(document.body);
 });
+
+Meteor.startup(function () {
+  var c = function (n) { return UIComponent.create({render:function(buf) { buf(String(n)); }}); };
+
+  var L = _UI.List();
+
+  L.addItemBefore('a', c(1));
+  L.addItemBefore('b', c(2));
+  L.addItemBefore('c', c(3));
+  L.makeRoot();
+  L.attach(document.body);
+  L.addItemBefore('d', c(4));
+  L.addItemBefore('e', c(5), 'b');
+  L.moveItemBefore('d', 'c');
+  L.moveItemBefore('a');
+  L.removeItem('b');
+  L.removeItem('a');
+  L.removeItem('c');
+  L.removeItem('d');
+  L.removeItem('e');
+  L.addItemBefore('a', c(1));
+});

packages/ui/each.js

@@ -1,5 +1,45 @@
 var Component = UIComponent;
 
+_UI.List = Component.extend({
+  typeName: 'List',
+  isHeavyweight: true,
+  _idStringify: null,
+  constructed: function () {
+    this._items = new OrderedDict(
+      this._idStringify || function (x) { return x; });
+  },
+  addItemBefore: function (id, comp, beforeId) {
+    this._items.putBefore(id, comp, beforeId);
+
+    if (this.stage === Component.BUILT)
+      // XXX clean this up by making insertBefore work with two nulls
+      this.insertBefore(comp, beforeId ? this._items.get(beforeId) :
+                        this.lastNode().nextSibling, this.parentNode());
+  },
+  removeItem: function (id) {
+    var comp = this._items.remove(id);
+
+    if (this.stage === Component.BUILT)
+      comp.remove();
+  },
+  moveItemBefore: function (id, beforeId) {
+    var comp = this._items.get(id);
+    this._items.moveBefore(id, beforeId);
+
+    if (this.stage === Component.BUILT) {
+      comp.detach();
+      this.insertBefore(comp, beforeId ? this._items.get(beforeId) :
+                        this.lastNode().nextSibling, this.parentNode());
+    }
+  },
+  render: function (buf) {
+    var self = this;
+    self._items.forEach(function (comp) {
+      buf(comp);
+    });
+  }
+});
+
 _UI.Each = Component.extend({
   typeName: 'Each',
   render: function (buf) {
@@ -28,6 +68,7 @@ _UI.Each = Component.extend({
         // idStringify seems to allow for them -- though
         // OrderedDict won't call stringify on a falsy arg.
         items.putBefore(doc._id, comp, beforeId);
+
       }
     });