From 53c83be0b87ff07f0ba8abc6809d423b1f2f53dc Mon Sep 17 00:00:00 2001
From: David Greenspan <dgreenspan@alum.mit.edu>
Date: Tue, 18 Mar 2014 14:59:42 -0700
Subject: [PATCH] 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     |  9 ---------
 packages/ui/builtins.js |  8 ++++++++
 packages/ui/each.js     | 10 +++++-----
 packages/ui/render.js   | 11 ++++-------
 4 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/ui/base.js b/packages/ui/base.js
index 8f6cba41f6..773982a6f8 100644
--- a/packages/ui/base.js
+++ b/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);
 };
-
diff --git a/packages/ui/builtins.js b/packages/ui/builtins.js
index 3699854c6d..5cdcd67f4f 100644
--- a/packages/ui/builtins.js
+++ b/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;
 };
 
diff --git a/packages/ui/each.js b/packages/ui/each.js
index df8f202631..a0584aa6e6 100644
--- a/packages/ui/each.js
+++ b/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();
   }
 });
diff --git a/packages/ui/render.js b/packages/ui/render.js
index 7a0ad8a4a8..27bb3e8219 100644
--- a/packages/ui/render.js
+++ b/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) {