1 files changed, 108 insertions, 55 deletions

diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 9d963ada..8a8f5739 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -270,7 +270,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
                 aParentNode,
                 eventManager = this.eventManager;
             if (anElement) {
-                while ((aParentNode = anElement.parentNode) !== null && eventManager.eventHandlerForElement(aParentNode) == null) {
+                while ((aParentNode = anElement.parentNode) != null && eventManager.eventHandlerForElement(aParentNode) == null) {
                     anElement = aParentNode;
                 }
                 return aParentNode ? eventManager.eventHandlerForElement(aParentNode) : this._alternateParentComponent;
@@ -539,6 +539,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
      */
     cleanupDeletedComponentTree: {
         value: function() {
+            Object.deleteBindings(this);
             this.needsDraw = false;
             this.traverseComponentTree(function(component) {
                 Object.deleteBindings(component);
@@ -551,12 +552,12 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         value: null
     },
 
-    _newContent: {
+    _newDomContent: {
         enumerable: false,
         value: null
     },
 
-    content: {
+    domContent: {
         get: function() {
             if (this._element) {
                 return Array.prototype.slice.call(this._element.childNodes, 0);
@@ -565,12 +566,16 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             }
         },
         set: function(value) {
-            var components = [],
-                childNodes;
+            var components,
+                componentsToAdd = [];
 
-            this._newContent = value;
+            this._newDomContent = value;
             this.needsDraw = true;
 
+            if (this._newDomContent === null) {
+                this._shouldClearDomContentOnNextDraw = true;
+            }
+
             if (typeof this.contentWillChange === "function") {
                 this.contentWillChange(value);
             }
@@ -584,7 +589,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
 
             if (value instanceof Element) {
                 findAndDetachComponents(value);
-            } else {
+            } else if (value) {
                 for (var i = 0; i < value.length; i++) {
                     findAndDetachComponents(value[i]);
                 }
@@ -596,7 +601,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
 
                 if (component) {
                     component.detachFromParentComponent();
-                    components.push(component);
+                    componentsToAdd.push(component);
                 } else {
                     var childNodes = node.childNodes;
                     for (var i = 0, childNode; (childNode = childNodes[i]); i++) {
@@ -606,12 +611,16 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             }
 
             // not sure if I can rely on _cachedParentComponent to detach the nodes instead of doing one loop for dettach and another to attach...
-            for (var i = 0, component; (component = components[i]); i++) {
+            for (var i = 0, component; (component = componentsToAdd[i]); i++) {
                 this._addChildComponent(component);
             }
         }
     },
 
+    _shouldClearDomContentOnNextDraw: {
+        value: false
+    },
+
 /**
     Description TODO
     @function
@@ -988,7 +997,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         enumerable: false,
         value: function _drawIfNeeded(level) {
             var childComponent,
-                oldDrawList;
+                oldDrawList, i, childComponentListLength;
             this._treeLevel = level;
             if (this.needsDraw && !this._addedToDrawCycle) {
                 rootComponent.addToDrawCycle(this);
@@ -999,7 +1008,9 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             if (this._drawList !== null && this._drawList.length > 0) {
                 oldDrawList = this._drawList;
                 this._drawList = [];
-                while ((childComponent = oldDrawList.shift())) {
+                childComponentListLength = oldDrawList.length;
+                for (i = 0; i < childComponentListLength; i++) {
+                    childComponent = oldDrawList[i];
                     if (drawLogger.isDebug) {
                         drawLogger.debug("Parent Component " + (this.element != null ? this.element.id : "") + " drawList length: " + oldDrawList.length);
                     }
@@ -1014,6 +1025,44 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             }
         }
     },
+
+    _updateComponentDom: {
+        value: function() {
+            var component, composer, length, i;
+            if (this._firstDraw) {
+
+                if (this.parentComponent && typeof this.parentComponent.childComponentWillPrepareForDraw === "function") {
+                    this.parentComponent.childComponentWillPrepareForDraw(this);
+                }
+
+                this._prepareForDraw();
+
+                if (this.prepareForDraw) {
+                    this.prepareForDraw();
+                }
+
+                // Load any non lazyLoad composers that have been added
+                length = this.composerList.length;
+                for (i = 0; i < length; i++) {
+                    composer = this.composerList[i];
+                    if (!composer.lazyLoad) {
+                        composer._load();
+                    }
+                }
+
+                // Will we expose a different property, firstDraw, for components to check
+                this._firstDraw = false;
+            }
+
+            if (this._newDomContent !== null || this._shouldClearDomContentOnNextDraw) {
+                if (drawLogger.isDebug) {
+                    logger.debug("Component content changed: component ", this._montage_metadata.objectName, this.identifier, " newDomContent", this._newDomContent);
+                }
+                this._performDomContentChanges();
+            }
+        }
+    },
+
 /**
   Description TODO
   @private
@@ -1042,7 +1091,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
                 template.setAttribute(attributeName, value);
             }
 
-            element.parentNode.replaceChild(template, element);
+            if (element.parentNode) {
+                element.parentNode.replaceChild(template, element);
+            } else {
+                console.warn("Warning: Trying to replace element ", element," which has no parentNode");
+            }
 
             this.eventManager.unregisterEventHandlerForElement(element);
             this.eventManager.registerEventHandlerForElement(this, template);
@@ -1108,31 +1161,30 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
   Description TODO
   @private
 */
-    _draw: {
+    _performDomContentChanges: {
         value: function() {
-            var contents = this._newContent,
+            var contents = this._newDomContent,
+                oldContent = this._element.childNodes[0],
                 element;
 
-            this._canDrawTable = {};
-            this._canDrawCount = 0;
-
-            if (contents) {
+            if (contents || this._shouldClearDomContentOnNextDraw) {
                 element = this._element;
 
                 element.innerHTML = "";
 
                 if (contents instanceof Element) {
                     element.appendChild(contents);
-                } else {
+                } else if(contents !== null) {