7 files changed, 82 insertions, 28 deletions

diff --git a/node_modules/montage/core/event/binding.js b/node_modules/montage/core/event/binding.js
index 7a15e5b9..f061e89a 100755
--- a/node_modules/montage/core/event/binding.js
+++ b/node_modules/montage/core/event/binding.js
@@ -505,8 +505,6 @@ var PropertyChangeBindingListener = exports.PropertyChangeBindingListener = Obje
             localPrevValue = event.minus,
             localTarget = event.target,
             type = event.type,
-            changeType = event.propertyChange,
-            localPropertyName = event.propertyName,
             boundObjectValue,
             sourceObjectValue,
             dotIndex,
@@ -676,8 +674,6 @@ var PropertyChangeBindingListener = exports.PropertyChangeBindingListener = Obje
         localPrevValue = null;
         localTarget = null;
         type = null;
-        changeType = null;
-        localPropertyName = null;
         dotIndex = null;
         nextPathComponent = null;
         atSignIndex = null;
diff --git a/node_modules/montage/core/event/event-manager.js b/node_modules/montage/core/event/event-manager.js
index 4adc3926..b3e97dbe 100755
--- a/node_modules/montage/core/event/event-manager.js
+++ b/node_modules/montage/core/event/event-manager.js
@@ -1874,9 +1874,9 @@ var EventManager = exports.EventManager = Montage.create(Montage,/** @lends modu
                 if (target) {
                     associatedComponent = this.eventHandlerForElement(target);
                     if (associatedComponent) {
-                        if (!associatedComponent._preparedForActivationEvents && typeof associatedComponent.prepareForActivationEvents === "function") {
+                        if (!associatedComponent._preparedForActivationEvents) {
 
-                            associatedComponent.prepareForActivationEvents();
+                            associatedComponent._prepareForActivationEvents();
                             associatedComponent._preparedForActivationEvents = true;
 
                         } else if (associatedComponent._preparedForActivationEvents) {
diff --git a/node_modules/montage/core/promise.js b/node_modules/montage/core/promise.js
index aabe113d..df063846 100755
--- a/node_modules/montage/core/promise.js
+++ b/node_modules/montage/core/promise.js
@@ -65,8 +65,17 @@ function toPromise(value) {
 var Creatable = Object.create(Object.prototype, {
     create: {
         value: function (descriptor) {
+            for (var name in descriptor) {
+                var property = descriptor[name];
+                if (!property.set && !property.get) {
+                    property.writable = true
+                }
+                property.configurable = true;
+            }
             return Object.create(this, descriptor);
-        }
+        },
+        writable: true,
+        configurable: true
     },
 });
 
diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 90612f83..e41a1958 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -7,7 +7,6 @@
         @module montage/ui/component
     @requires montage/core/core
     @requires montage/core/event/mutable-event
-    @requires montage/core/bitfield
     @requires montage/ui/reel
     @requires montage/core/gate
     @requires montage/core/logger | component
@@ -16,7 +15,6 @@
 */
 var Montage = require("montage").Montage,
     MutableEvent = require("core/event/mutable-event").MutableEvent,
-    BitField = require("core/bitfield").BitField,
     Template = require("ui/template").Template,
     Gate = require("core/gate").Gate,
     logger = require("core/logger").logger("component"),
@@ -525,7 +523,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
     
     content: {
         get: function() {
-            return Array.prototype.slice.call(this._element.childNodes, 0);
+            if (this._element) {
+                return Array.prototype.slice.call(this._element.childNodes, 0);
+            } else {
+                return null;
+            }
         },
         set: function(value) {
             var components = [],
@@ -891,11 +893,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         Template.templateWithModuleId(info.require, templateModuleId, onTemplateLoad);
     }},
     /**
-    Callback for the <code>_canDrawBitField</code>.<br>
+    Callback for the <code>_canDrawGate</code>.<br>
     Propagates to the parent and adds the component to the draw list.
     @function
     @param {Property} gate
-    @see _canDrawBitField
+    @see _canDrawGate
     */
     gateDidBecomeTrue: {
         value: function(gate) {
@@ -1047,6 +1049,27 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         enumerable: false,
         value: null
     },
+
+    /**
+     * Called to add event listeners on demand
+     * @type function
+     * @private
+     */
+    _prepareForActivationEvents: {
+        value: function() {
+            var i = this.composerList.length, composer;
+            for (i = 0; i < this.composerList.length; i++) {
+                composer = this.composerList[i];
+                if (composer.lazyLoad) {
+                    composer._load();
+                }
+            }
+            if (typeof this.prepareForActivationEvents === "function") {
+                this.prepareForActivationEvents();
+            }
+        }
+    },
+
 /**
   Description TODO
   @private
@@ -1297,7 +1320,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             this.composerList.push(composer);
 
             if (!this._firstDraw) {  // prepareForDraw has already happened so do the loading here
-                composer._load();
+                if (!composer.lazyLoad) {
+                    composer._load();
+                } else if (this._preparedForActivationEvents) { // even though it's lazyLoad prepareForActivationEvents has already happened
+                    composer._load();
+                }
             }
         }
     },
@@ -1671,7 +1698,7 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
     */
     addToDrawCycle: {
         value: function(component) {
-            var needsDrawListIndex = this._readyToDrawListIndex, length;
+            var needsDrawListIndex = this._readyToDrawListIndex, length, composer;
 
             if (needsDrawListIndex.hasOwnProperty(component.uuid)) {
                 // Requesting a draw of a component that has already been drawn in the current cycle
@@ -1694,10 +1721,13 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
                     component.prepareForDraw();
                 }
 
-                // Load any composers that have been added
+                // Load any non lazyLoad composers that have been added
                 length = component.composerList.length;
                 for (i = 0; i < length; i++) {
-                    component.composerList[i]._load();
+                    composer = component.composerList[i];
+                    if (!composer.lazyLoad) {
+                        composer._load();
+                    }
                 }
 
                 // Will we expose a different property, firstDraw, for components to check
diff --git a/node_modules/montage/ui/composer/composer.js b/node_modules/montage/ui/composer/composer.js
index 2f91bb22..eee7be67 100644
--- a/node_modules/montage/ui/composer/composer.js
+++ b/node_modules/montage/ui/composer/composer.js
@@ -40,6 +40,20 @@ exports.Composer = Montage.create(Montage, /** @lends module:montage/ui/composer
         }
     },
 
+
+    /**
+     * This property controls when a composer's load method is called.  If `false`
+     * the composer's load method is called immediately as part of the next draw
+     * cycle after addComposer has been called on its associated component.  If
+     * `true` loading of the composer is delayed until its associated component
+     * has prepareForActivationEvents called.
+     * @property
+     * @default false
+     */
+    lazyLoad: {
+        value: false
+    },
+