diff --git a/examples/unfinished/shark/client/shark.js b/examples/unfinished/shark/client/shark.js index 37f3ef1700..68d60266ec 100644 --- a/examples/unfinished/shark/client/shark.js +++ b/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 diff --git a/packages/ui/component.js b/packages/ui/component.js index 872aa296b0..8eede063b0 100644 --- a/packages/ui/component.js +++ b/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) {