Make #each stop sooner; observe inside Deps comp

By doing the #each observe inside the current Deps computation from materialization, it will stop when the parent computation is invalidated.

packages/ui/base.js

@@ -306,14 +306,6 @@ UI.Component.notifyParented = function () {
     });
   }
 
-  // XXX this is an undocumented callback
-  if (self.parented) {
-    Deps.nonreactive(function () {
-      updateTemplateInstance(self);
-      self.parented.call(self.templateInstance);
-    });
-  }
-
   if (self.rendered) {
     // Defer rendered callback until flush time.
     Deps.afterFlush(function () {
@@ -336,4 +328,3 @@ UI.getElementData = function (el) {
   var comp = UI.DomRange.getContainingComponent(el);
   return comp && getComponentData(comp);
 };
-

packages/ui/builtins.js

@@ -53,6 +53,14 @@ UI.With = function (argFunc, contentBlock) {
   }
   block.data = UI.emboxValue(argFunc, safeEquals);
 
+  block.materialized = function () {
+    if (Deps.active) {
+      Deps.onInvalidate(function () {
+        block.data.stop();
+      });
+    }
+  };
+
   return block;
 };
 

packages/ui/each.js

@@ -10,7 +10,7 @@ UI.EachImpl = Component.extend({
       // value we return will be static (in HTML or text)
       // or dynamic (materialized DOM).  The dynamic path
       // returns `null` and then we populate the DOM from
-      // the `parented` callback.
+      // the `materialized` callback.
       //
       // It would be much cleaner to always return the same
       // value here, and to have that value be some special
@@ -38,8 +38,8 @@ UI.EachImpl = Component.extend({
       return null;
     }
   },
-  parented: function () {
-    var self = this.__component__;
+  materialized: function () {
+    var self = this;
 
     var range = self.dom;
 
@@ -113,7 +113,7 @@ UI.EachImpl = Component.extend({
     addToCount(0);
   },
   destroyed: function () {
-    if (this.observeHandle)
-      this.observeHandle.stop();
+    if (this.__component__.observeHandle)
+      this.__component__.observeHandle.stop();
   }
 });

packages/ui/render.js

@@ -464,13 +464,10 @@ var materialize = function (node, parent, before, parentComponent) {
     // component
     var instance = UI.render(node, parentComponent);
 
-    // XXXX HACK
-    if (Deps.active &&
-        typeof instance.data === 'function' && instance.data.stop) {
-      Deps.onInvalidate(function () {
-        instance.data.stop();
-      });
-    }
+    // Call internal callback, which may take advantage of the current
+    // Deps computation.
+    if (instance.materialized)
+      instance.materialized();
 
     insert(instance.dom, parent, before);
   } else if (node instanceof HTML.CharRef) {