From fbacc95c411216667944cecc7d81262486bac446 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Tue, 31 Mar 2015 12:10:48 -0700
Subject: [PATCH 01/13] Experiment with nested template scope binding.

---
 src/lib/template/templatizer.html | 31 +++++++++++++++++++++++++++++++
 src/lib/template/x-repeat.html    |  8 ++++++++
 2 files changed, 39 insertions(+)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index b190163d04..f4b3f32a6d 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -69,6 +69,7 @@
           if (contentHost) {
             Polymer.Annotations.prepElement = 
               contentHost._prepElement.bind(contentHost);
+            this._createForwardBindings();
           }
           archetype._annotes = c._annotes ||
             Polymer.Annotations.parseAnnotations(template);
@@ -84,6 +85,33 @@
       }
     },
 
+    _createForwardBindings: function() {
+      if (this._forwardProp) {
+        // inner nested x-repeat host isn't the outer x-repeat! argh...
+        var tidx = this.host._nodes.lastIndexOf(this);
+        var bindings = this.host._annotes.filter(function(o) {
+          return o.bindings[0] && o.bindings[0].index == tidx;
+        })[0].bindings.filter(function(b) {
+          return b.name != 'items';
+        });
+        this._forwardProps = bindings.map(function(b) {
+          return b.name;
+        });
+        this._forwardListenerProps = bindings.filter(function(b) {
+          return Polymer.Bind._shouldAddListener(b);
+        }).map(function(b) {
+          return b.name;
+        });
+        var fx = bindings.reduce(function(f, b) { 
+          f[b.name] = ['this._forwardProp(\'' + b.name + '\')'];
+          return f;
+        }, {});
+        for (var n in fx) {
+          Polymer.Bind._bindPropertyEffects(this, n, fx[n]);
+        }
+      }
+    },
+
     _notifyPathImpl: function() {
       var pd = this.pathDelegate;
       if (pd) {
@@ -105,6 +133,9 @@
     },
 
     stamp: function(model) {
+      model = Polymer.Base.extend(this._forwardProps.reduce(function(m, p) {
+        m[p] = this[p]; return m;
+      }.bind(this), {}), model);
       return new this.ctor(model);
     }
 
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 584ffbaa3d..b4aa581a7c 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -448,6 +448,14 @@
       return row;
     },
 
+    _forwardProp: function(prop) {
+      if (this.rows) {
+        this.rows.forEach(function(row) {
+          row[prop] = this[prop];
+        }, this);        
+      }
+    },
+
     _notifyDelegatePath: function(row, path, value) {
       this.notifyPath(path.replace('item', 'items.' + row.key), value);
     },

From b7c1dbefd19fd5b4417a6b695d69ffeff9b89ef2 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Tue, 31 Mar 2015 21:09:25 -0700
Subject: [PATCH 02/13] Use annotator to find parent.props & auto-bind to
 template.

---
 src/lib/annotations/annotations.html | 28 ++++++++++-
 src/lib/template/templatizer.html    | 53 +++++++-------------
 src/lib/template/x-repeat.html       | 74 ++++++++++++++++++++--------
 3 files changed, 97 insertions(+), 58 deletions(-)

diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index fdd863fe16..6315b8571b 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -141,13 +141,39 @@
           if (node.localName === 'template') {
             // TODO(sjmiles): simply altering the .content reference didn't
             // work (there was some confusion, might need verification)
+            var bindings = [];
             var content = document.createDocumentFragment();
+            content._annotes = this.parseAnnotations(node);
+            // Special-case treatment of 'parent.*' props for nested templates
+            // Automatically bind `prop` on host to `_parent_prop` on template
+            // for any `parent.prop`'s encountered in template binding; it is
+            // responsibility of the template implementation to forward
+            // these properties as appropriate
+            var parentProps = content._parentProps = {};
+            content._annotes.forEach(function(n) {
+              n.bindings.forEach(function(b) {
+                var m;
+                if (m = b.value.match(/parent\.([^.]*)/)) {
+                  var prop = m[1];
+                  if (!parentProps[prop]) {
+                    parentProps[prop] = true;
+                    bindings.push({
+                      index: i,
+                      kind: 'property',
+                      mode: '{',
+                      name: '_parent_' + prop,
+                      value: prop
+                    });
+                  }
+                }
+              });
+            });
             content.appendChild(node.content);
             // TODO(sjmiles): using `nar` to avoid unnecessary allocation;
             // in general the handling of these arrays needs some cleanup 
             // in this module
             list.push({
-              bindings: Polymer.nar,
+              bindings: bindings,
               events: Polymer.nar,
               templateContent: content,
               parent: annote,
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index f4b3f32a6d..6c3ee12041 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -35,6 +35,8 @@
       this.customPrepAnnotations(archetype, template);
       // setup accessors
       archetype._prepEffects();
+      // forward parent properties to archetype
+      this._prepParentProperties(archetype);
       // late-binds archetype.listen to host.listen; h.l doesn't exist yet
       archetype.listen = function() { 
         this.listen.apply(this, arguments);
@@ -65,16 +67,8 @@
         archetype._template = template;
         var c = template._content;
         if (c) {
-          var contentHost = archetype.contentHost;
-          if (contentHost) {
-            Polymer.Annotations.prepElement = 
-              contentHost._prepElement.bind(contentHost);
-            this._createForwardBindings();
-          }
-          archetype._annotes = c._annotes ||
-            Polymer.Annotations.parseAnnotations(template);
-          c._annotes = archetype._annotes;
-          Polymer.Annotations.prepElement = null;
+          archetype._annotes = c._annotes;
+          archetype._parentProps = c._parentProps;
         } 
         else {
           console.warn('no _content');
@@ -85,29 +79,13 @@
       }
     },
 
-    _createForwardBindings: function() {
-      if (this._forwardProp) {
-        // inner nested x-repeat host isn't the outer x-repeat! argh...
-        var tidx = this.host._nodes.lastIndexOf(this);
-        var bindings = this.host._annotes.filter(function(o) {
-          return o.bindings[0] && o.bindings[0].index == tidx;
-        })[0].bindings.filter(function(b) {
-          return b.name != 'items';
-        });
-        this._forwardProps = bindings.map(function(b) {
-          return b.name;
-        });
-        this._forwardListenerProps = bindings.filter(function(b) {
-          return Polymer.Bind._shouldAddListener(b);
-        }).map(function(b) {
-          return b.name;
-        });
-        var fx = bindings.reduce(function(f, b) { 
-          f[b.name] = ['this._forwardProp(\'' + b.name + '\')'];
-          return f;
-        }, {});
-        for (var n in fx) {
-          Polymer.Bind._bindPropertyEffects(this, n, fx[n]);
+    _prepParentProperties: function(archetype) {
+      if (this._forwardParentProp) {
+        if (this._parentProps = archetype._parentProps) {
+          for (var prop in this._parentProps) {
+            Polymer.Bind._bindPropertyEffects(this, '_parent_' + prop,
+              ['this._forwardParentProp(\'' + prop + '\')']);
+          }
         }
       }
     },
@@ -133,9 +111,12 @@
     },
 
     stamp: function(model) {
-      model = Polymer.Base.extend(this._forwardProps.reduce(function(m, p) {
-        m[p] = this[p]; return m;
-      }.bind(this), {}), model);
+      if (model) {
+        model.parent = model.parent || {};
+        for (var prop in this._parentProps) {
+          model.parent[prop] = this['_parent_' + prop];
+        }
+      }
       return new this.ctor(model);
     }
 
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index b4aa581a7c..bb6b324371 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -102,7 +102,8 @@
        * to stamp and that that each template instance should bind to.
        */
       items: {
-        type: Array
+        type: Array,
+        observer: '_itemsChanged'
       },
 
       /**
@@ -155,10 +156,6 @@
       Polymer.Templatizer
     ],
 
-    observers: {
-      'items.*': '_itemsChanged'
-    },
-
     created: function() {
       this.boundCollectionObserver = this.render.bind(this);
     },
@@ -193,19 +190,14 @@
         this.observe.replace('.*', '.').split(' ');
     },
 
-    _itemsChanged: function(items, old, path) {
-      if (path) {
-        this._notifyElement(path, items);
-        this._checkObservedPaths(path);
-      } else {
-        if (old) {
-          this._unobserveCollection(old);
-        }
-        if (items) {
-          this._observeCollection(items);
-          this.debounce('render', this.render);
-        }
-      }          
+    _itemsChanged: function(items, old) {
+      if (old) {
+        this._unobserveCollection(old);
+      }
+      if (items) {
+        this._observeCollection(items);
+        this.debounce('render', this.render);
+      }
     },
 
     _checkObservedPaths: function(path) {
@@ -265,6 +257,7 @@
         }
         row.item = item;
         row.key = key;
+        row.index = i;
         rowForKey[key] = i;
       }
       // Remove extra
@@ -448,16 +441,55 @@
       return row;
     },
 
-    _forwardProp: function(prop) {
+    _forwardParentProp: function(prop) {
+      if (this.rows) {
+        this.rows.forEach(function(row) {
+          var val = this['_parent_' + prop];
+          row.parent[prop] = val;
+          row.notifyPath('parent.' + prop, val, true);
+        }, this);        
+      }
+    },
+
+    _forwardParentPath: function(path, value) {
       if (this.rows) {
         this.rows.forEach(function(row) {
-          row[prop] = this[prop];
+          row.notifyPath('parent.' + path, value, true);
         }, this);        
       }
     },
 
     _notifyDelegatePath: function(row, path, value) {
-      this.notifyPath(path.replace('item', 'items.' + row.key), value);
+      // 'parent.foo.bar.baz'
+      // p[1] = 'parent'
+      // p[2] = 'foo.bar.baz'
+      // p[3] = 'foo'
+      var p = path.match(/([^.]*)\.(([^.]*).*)/);
+      switch (p[1]) {
+        case 'item':
+          this.notifyPath(path.replace('item', 'items.' + row.key), value);
+          break;
+        case 'parent':
+          if (p[2] == p[3]) {
+            this.host[p[2]] = value;
+          } else {
+            this.host.notifyPath(p[2], value);
+          }
+          break;
+      }
+    },
+
+    notifyPath: function(path, value, fromAbove) {
+      var prop = path.substring(0, path.indexOf('.'));
+      if (prop == 'item') {
+        this._notifyElement(path, value);
+      } else {
+        if (prop.indexOf('_parent_') === 0) {
+          this._forwardParentPath(path.substring(8), value);
+        } else {
+          Polymer.Base.notifyPath.apply(this, arguments);
+        }
+      }
     },
 
     _notifyElement: function(path, value) {

From f906c935d0b848aa993b55ca8f910b0dff190f0c Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Tue, 31 Mar 2015 22:15:52 -0700
Subject: [PATCH 03/13] Fix notifyPath override impl.

---
 src/lib/template/x-repeat.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index bb6b324371..5a08063f89 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -481,15 +481,13 @@
 
     notifyPath: function(path, value, fromAbove) {
       var prop = path.substring(0, path.indexOf('.'));
-      if (prop == 'item') {
+      if (prop == 'items') {
         this._notifyElement(path, value);
-      } else {
-        if (prop.indexOf('_parent_') === 0) {
-          this._forwardParentPath(path.substring(8), value);
-        } else {
-          Polymer.Base.notifyPath.apply(this, arguments);
-        }
+        this._checkObservedPaths(path);
+      } else if (prop.indexOf('_parent_') === 0) {
+        this._forwardParentPath(path.substring(8), value);
       }
+      Polymer.Base.notifyPath.apply(this, arguments);
     },
 
     _notifyElement: function(path, value) {

From b49fc5c3cbeaab469665015e0b234f0935c27873 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 3 Apr 2015 15:56:18 -0700
Subject: [PATCH 04/13] Support for forwarding deeply nested parent props. Add
 smoke test.

---
 src/lib/annotations/annotations.html |  60 ++-
 src/lib/template/templatizer.html    |  59 ++-
 src/lib/template/x-if.html           |  28 +-
 src/lib/template/x-repeat.html       |  64 ++--
 src/standard/notify-path.html        | 524 ++++++++++++++-------------
 test/smoke/x-if.html                 |  20 +-
 test/smoke/x-repeat.html             | 248 +++++++++++++
 7 files changed, 659 insertions(+), 344 deletions(-)
 create mode 100644 test/smoke/x-repeat.html

diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index 6315b8571b..07962b63f3 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -141,34 +141,26 @@
           if (node.localName === 'template') {
             // TODO(sjmiles): simply altering the .content reference didn't
             // work (there was some confusion, might need verification)
-            var bindings = [];
             var content = document.createDocumentFragment();
             content._annotes = this.parseAnnotations(node);
+            content.appendChild(node.content);
             // Special-case treatment of 'parent.*' props for nested templates
             // Automatically bind `prop` on host to `_parent_prop` on template
             // for any `parent.prop`'s encountered in template binding; it is
             // responsibility of the template implementation to forward
             // these properties as appropriate
-            var parentProps = content._parentProps = {};
-            content._annotes.forEach(function(n) {
-              n.bindings.forEach(function(b) {
-                var m;
-                if (m = b.value.match(/parent\.([^.]*)/)) {
-                  var prop = m[1];
-                  if (!parentProps[prop]) {
-                    parentProps[prop] = true;
-                    bindings.push({
-                      index: i,
-                      kind: 'property',
-                      mode: '{',
-                      name: '_parent_' + prop,
-                      value: prop
-                    });
-                  }
-                }
+            var bindings = [];
+            this._discoverTemplateParentProps(content);
+            console.log(node, content._parentProps);
+            for (var prop in content._parentProps) {
+              bindings.push({
+                index: i,
+                kind: 'property',
+                mode: '{',
+                name: '_parent_' + prop,
+                value: prop
               });
-            });
-            content.appendChild(node.content);
+            }
             // TODO(sjmiles): using `nar` to avoid unnecessary allocation;
             // in general the handling of these arrays needs some cleanup 
             // in this module
@@ -190,6 +182,34 @@
       }
     },
 
+    _discoverTemplateParentProps: function(content) {
+      var parentProps = content._parentPropChain = [];
+      content._annotes.forEach(function(n) {
+        n.bindings.forEach(function(b) {
+          var m;
+          if (m = b.value.match(/parent\.((parent\.)*)([^.]*)/)) {
+            var depth = m[1].length / 7; // 'parent.'.length == 7
+            var pp = parentProps[depth] || (parentProps[depth] = {});
+            pp[m[3]] = true;
+            if (depth > 0) {
+              pp = parentProps[0] || (parentProps[0] = {});
+              pp.parent = true;
+            }
+          }
+        });
+        if (n.templateContent) {
+          var tpp = n.templateContent._parentPropChain;
+          for (var i=1; i<tpp.length; i++) {
+            if (tpp[i]) {
+              var pp = parentProps[i-1] || (parentProps[i-1] = {});
+              Polymer.Base.simpleMixin(pp, tpp[i]);              
+            }
+          }
+        }
+      });
+      content._parentProps = parentProps[0];
+    },
+
     // add annotation data from attributes to the `annotation` for node `node`
     // TODO(sjmiles): the distinction between an `annotation` and 
     // `annotation data` is not as clear as it could be
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 6c3ee12041..638d7cbd57 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -23,6 +23,8 @@
       if (template._content._ctor) {
         this.ctor = template._content._ctor;
         //console.log('Templatizer.templatize: using memoized archetype');
+        // forward parent properties to archetype
+        this._prepParentProperties(this.ctor.prototype._parentProps);
         return;
       }
       // `archetype` is the prototype of the anonymous
@@ -36,7 +38,7 @@
       // setup accessors
       archetype._prepEffects();
       // forward parent properties to archetype
-      this._prepParentProperties(archetype);
+      this._prepParentProperties(archetype._parentProps);
       // late-binds archetype.listen to host.listen; h.l doesn't exist yet
       archetype.listen = function() { 
         this.listen.apply(this, arguments);
@@ -79,23 +81,51 @@
       }
     },
 
-    _prepParentProperties: function(archetype) {
+    _prepParentProperties: function(parentProps) {
       if (this._forwardParentProp) {
-        if (this._parentProps = archetype._parentProps) {
-          for (var prop in this._parentProps) {
-            Polymer.Bind._bindPropertyEffects(this, '_parent_' + prop,
+        if (this._parentProps = parentProps) {
+          for (var prop in parentProps) {
+            var parentProp = '_parent_' + prop;
+            var val = this[parentProp];
+            Polymer.Bind._bindPropertyEffects(this, parentProp,
               ['this._forwardParentProp(\'' + prop + '\')']);
+            this._setData(parentProp, val);
           }
         }
       }
     },
 
-    _notifyPathImpl: function() {
-      var pd = this.pathDelegate;
-      if (pd) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(this);
-        pd._notifyDelegatePath.apply(pd, args);
+    _notifyPathImpl: function(path, value) {
+      var p = path.match(/([^.]*)\.(([^.]*).*)/);
+                          // 'root.sub.path'
+      var root = p[1];    // 'root'
+      var sub = p[3];     // 'sub'
+      var subPath = p[2]; // 'sub.path'
+      // Notify host of parent.* path/property changes
+      var host = this._host;
+      if (root == 'parent') {
+        if (sub == subPath) {
+          host.host[sub] = value;
+        } else {
+          host.host.notifyPath(subPath, value);
+        }        
+      }
+      // Extension point for Templatizer sub-classes
+      if (host._handleInstancePath) {
+        host._handleInstancePath.call(host, this, root, subPath, value);
+      }
+    },
+
+    // Implements extension point from Base notify-path module
+    _pathChanged: function(path, value, fromAbove) {
+      if (this._forwardParentPath) {
+        if (path.indexOf('_parent_') === 0) {
+          this._forwardParentPath(path.substring(8), value);
+        }
+      }
+      // Extension point for Templatizer sub-classes
+      if (this._handleParentPath) {
+        this._handleParentPath(path, value);
       }
     },
 
@@ -111,11 +141,14 @@
     },
 
     stamp: function(model) {
-      if (model) {
+      model = model || {};
+      // TODO(kschaaf): temporary workaround to have the correct "binding" host
+      model._host = this;
+      if (this._parentProps) {
         model.parent = model.parent || {};
         for (var prop in this._parentProps) {
           model.parent[prop] = this['_parent_' + prop];
-        }
+        }        
       }
       return new this.ctor(model);
     }
diff --git a/src/lib/template/x-if.html b/src/lib/template/x-if.html
index 59e757c767..0a333e525c 100644
--- a/src/lib/template/x-if.html
+++ b/src/lib/template/x-if.html
@@ -35,10 +35,6 @@
         type: Boolean
       },
 
-      item: {
-        type: Object
-      },
-
       restamp: {
         type: Boolean
       }
@@ -50,7 +46,7 @@
     ],
 
     observers: {
-      'if item restamp': 'render'
+      'if restamp': 'render'
     },
 
     render: function() {
@@ -71,7 +67,7 @@
     _ensureInstance: function() {
       if (!this._instance) {
         // TODO(sorvell): pickup stamping logic from x-repeat
-        this._instance = this.stamp(this.item);
+        this._instance = this.stamp();
         var root = this._instance.root;
         this._instance._children = Array.prototype.slice.call(root.childNodes);
         // TODO(sorvell): this incantation needs to be simpler.
@@ -108,6 +104,26 @@
           this.serializeValueToAttribute(!showing, 'hidden', n);
         }
       }, this);
+    },
+
+    // Implements extension point from Templatizer mixin
+    // Called as side-effect of a host property change, responsible for
+    // notifying parent.<prop> path change on instance
+    _forwardParentProp: function(prop) {
+      if (this._instance) {
+        var val = this['_parent_' + prop];
+        this._instance.parent[prop] = val;
+        this._instance.notifyPath('parent.' + prop, val, true);
+      }
+    },
+
+    // Implements extension point from Templatizer
+    // Called as side-effect of a host path change, responsible for
+    // notifying parent.<path> path change on each row
+    _forwardParentPath: function(path, value) {
+      if (this._instance) {
+        this._instance.notifyPath('parent.' + path, value, true);
+      }
     }
 
   });
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 5a08063f89..d2590cc5d8 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -425,8 +425,7 @@
 
     _generateRow: function(idx, item) {
       var row = this.stamp({
-        item: item,
-        pathDelegate: this
+        item: item
       });
       // each row is a document fragment which is lost when we appendChild,
       // so we have to track each child individually
@@ -441,6 +440,29 @@
       return row;
     },
 
+    // Implements extension point from Templatizer
+    // Called as a side effect of a template instance path change, responsible 
+    // for notifying items.<key-for-row>.<path> change up to host
+    _handleInstancePath: function(row, root, subPath, value) {
+      if (root == 'item') {
+        this.notifyPath('items.' + row.key + '.' + subPath, value);
+      }
+    },
+
+    // Implements extension point from Templatizer
+    // Called as a side effect of a host path change, and performs actions
+    // required when items.* changes (notify specific row & check observed
+    // paths), then calls Templatizer to check for parent path changes
+    _handleParentPath: function(path, value) {
+      if (path.indexOf('items.') === 0) {
+        this._notifyItemChanged(path, value);
+        this._checkObservedPaths(path);
+      }
+    },
+
+    // Implements extension point from Templatizer mixin
+    // Called as side-effect of a host property change, responsible for
+    // notifying parent.<prop> path change on each row
     _forwardParentProp: function(prop) {
       if (this.rows) {
         this.rows.forEach(function(row) {
@@ -451,6 +473,9 @@
       }
     },
 
+    // Implements extension point from Templatizer
+    // Called as side-effect of a host path change, responsible for
+    // notifying parent.<path> path change on each row
     _forwardParentPath: function(path, value) {
       if (this.rows) {
         this.rows.forEach(function(row) {
@@ -459,38 +484,9 @@
       }
     },
 
-    _notifyDelegatePath: function(row, path, value) {
-      // 'parent.foo.bar.baz'
-      // p[1] = 'parent'
-      // p[2] = 'foo.bar.baz'
-      // p[3] = 'foo'
-      var p = path.match(/([^.]*)\.(([^.]*).*)/);
-      switch (p[1]) {
-        case 'item':
-          this.notifyPath(path.replace('item', 'items.' + row.key), value);
-          break;
-        case 'parent':
-          if (p[2] == p[3]) {
-            this.host[p[2]] = value;
-          } else {
-            this.host.notifyPath(p[2], value);
-          }
-          break;
-      }
-    },
-
-    notifyPath: function(path, value, fromAbove) {
-      var prop = path.substring(0, path.indexOf('.'));
-      if (prop == 'items') {
-        this._notifyElement(path, value);
-        this._checkObservedPaths(path);
-      } else if (prop.indexOf('_parent_') === 0) {
-        this._forwardParentPath(path.substring(8), value);
-      }
-      Polymer.Base.notifyPath.apply(this, arguments);
-    },
-
-    _notifyElement: function(path, value) {
+    // Called as a side effect of a host items.<key>.<path> path change,
+    // responsible for notifying item.<path> changes to row for key
+    _notifyItemChanged: function(path, value) {
       if (this._rowForKey) {
         // 'items.'.length == 6
         var dot = path.indexOf('.', 6);
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index c6376cd708..587b42cb7e 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -1,260 +1,264 @@
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link rel="import" href="../lib/case-map.html">
-<script>
-
-  /**
-   * Changes to an object sub-field (aka "path") via a binding
-   * (e.g. `<x-foo value="{{item.subfield}}"`) will notify other elements bound to
-   * the same object automatically.
-   *
-   * When modifying a sub-field of an object imperatively
-   * (e.g. `this.item.subfield = 42`), in order to have the new value propagated
-   * to other elements, a special `setPathValue(path, value)` API is provided.
-   * `setPathValue` sets the object field at the path specified, and then notifies the
-   * binding system so that other elements bound to the same path will update.
-   *
-   * Example:
-   *
-   *     Polymer({
-   *
-   *       is: 'x-date',
-   *
-   *       properties: {
-   *         date: {
-   *           type: Object,
-   *           notify: true
-   *          }
-   *       },
-   *
-   *       attached: function() {
-   *         this.date = {};
-   *         setInterval(function() {
-   *           var d = new Date();
-   *           // Required to notify elements bound to date of changes to sub-fields
-   *           // this.date.seconds = d.getSeconds(); <-- Will not notify
-   *           this.setPathValue('date.seconds', d.getSeconds());
-   *           this.setPathValue('date.minutes', d.getMinutes());
-   *           this.setPathValue('date.hours', d.getHours() % 12);
-   *         }.bind(this), 1000);
-   *       }
-   *
-   *     });
-   *
-   *  Allows bindings to `date` sub-fields to update on changes:
-   *
-   *     <x-date date="{{date}}"></x-date>
-   *
-   *     Hour: <span>{{date.hours}}</span>
-   *     Min:  <span>{{date.minutes}}</span>
-   *     Sec:  <span>{{date.seconds}}</span>
-   *
-   * @class data feature: path notification
-   */
-
-  Polymer.Base.addFeature({
-    /**
-      Notify that a path has changed. For example:
-
-          this.item.user.name = 'Bob';
-          this.notifyPath('item.user.name', this.item.user.name);
-
-      Returns true if notification actually took place, based on
-      a dirty check of whether the new value was already known
-    */
-    notifyPath: function(path, value, fromAbove) {
-      var old = this._propertySet(path, value);
-      // manual dirty checking for now...
-      if (old !== value) {
-        //console.group(this.localName + '#' + this.id + ' ' + path);
-        // Take path effects at this level for exact path matches,
-        // and notify down for any bindings to a subset of this path
-        this._pathEffector(path, value);
-        // Send event to notify the path change upwards
-        // Optimization: don't notify up if we know the notification
-        // is coming from above already (avoid wasted event dispatch)
-        if (!fromAbove) {
-          // TODO(sorvell): should only notify if notify: true?
-          this._notifyPath(path, value);
-        }
-        //console.groupEnd(this.localName + '#' + this.id + ' ' + path);
-      }
-    },
-
-    /**
-      Convienence method for setting a value to a path and calling
-      notify path
-    */
-    setPathValue: function(path, value) {
-      var parts = path.split('.');
-      if (parts.length > 1) {
-        var last = parts.pop();
-        var prop = this;
-        while (parts.length) {
-          prop = prop[parts.shift()];
-          if (!prop) {
-            return;
-          }
-        }
-        // TODO(kschaaf): want dirty-check here?
-        // if (prop[last] !== value) {
-          prop[last] = value;
-          this.notifyPath(path, value);
-        // }
-      } else {
-        this[path] = value;
-      }
-    },
-
-    getPathValue: function(path, root) {
-      var parts = path.split('.');
-      var last = parts.pop();
-      var prop = root || this;
-      while (parts.length) {
-        prop = prop[parts.shift()];
-        if (!prop) {
-          return;
-        }
-      }
-      return prop[last];
-    },
-
-    addPathObserver: function(path, method) {
-      var fx$ = this._pathEffects || (this._pathEffects = []);
-      var match = path.indexOf('.*') == (path.length-2);
-      if (match) {
-        path = path.slice(0, -2);
-      }
-      fx$.push({path: path, match: match, method: method});
-    },
-
-    // TODO(kschaaf): This machine can be optimized to memoize compiled path
-    // effectors as new paths are notified for performance, since it involves
-    // a fair amount of runtime lookup
-    _pathEffector: function(path, value) {
-      // get root property
-      var model = this._modelForPath(path);
-      // search property effects of the root property for 'annotation' effects
-      var fx$ = this._propertyEffects[model];
-      if (fx$) {
-        fx$.forEach(function(fx) {
-          if (fx.kind === 'annotation') {
-            // locate the bound node
-            var n = this._nodeForBinding(fx.effect);
-            if (n) {
-              // perform the effect
-              this._performAnnotationPathEffect(n, path, value, fx.effect);
-            }
-          }
-        }, this);
-      }
-      // iterate and perform _pathEffects matching path
-      if (this._pathEffects) {
-        this._pathEffects.forEach(function(fx) {
-          this._performPathEffect(path, value, fx);
-        }, this);
-      }
-      // notify runtime-bound paths
-      if (this._boundPaths) {
-        this._notifyBoundPaths(path, value);
-      }
-    },
-
-    _nodeForBinding: function(info) {
-      return info.id ? this.$[info.id] : this._nodes[info.index];
-    },
-
-    _performAnnotationPathEffect: function(node, path, value, effect) {
-      if (effect.value === path || effect.value.indexOf(path + '.') === 0) {
-        // TODO(sorvell): ideally the effect function is on this prototype
-        // so we don't have to call it like this.
-        Polymer.Bind.annotationEffect.call(this, path, value, effect);
-        // path == item.stuff.count
-        // value == item.stuff
-        // name == zizz
-        // calls effect n.notifyPath for zizz.count
-      } else if ((path.indexOf(effect.value + '.') === 0) &&
-                  node.notifyPath && !effect.negate) {
-        var p = this._fixPath(effect.name , effect.value, path);
-        node.notifyPath(p, value, true);
-      }
-    },
-
-    _performPathEffect: function(path, value, fx) {
-      if (fx.path == path || (fx.match && path.indexOf(fx.path) === 0)) {
-        var fn = this[fx.method];
-        if (fn) {
-          // TODO(kschaaf): sending null for old; no good way to get it?
-          fn.call(this, value, null, path);
-        }
-      }
-    },
-
-    bindPaths: function(to, from) {
-      this._boundPaths = this._boundPaths || {};
-      if (from) {
-        this._boundPaths[to] = from;
-        // this.setPathValue(to, this.getPathValue(from));
-      } else {
-        this.unbindPath(to);
-        // this.setPathValue(to, from);
-      }
-    },
-
-    unbindPaths: function(path) {
-      if (this._boundPaths) {
-        delete this._boundPaths[path];
-      }
-    },
-
-    _notifyBoundPaths: function(path, value) {
-      var from, to;
-      for (var a in this._boundPaths) {
-        var b = this._boundPaths[a];
-        if (path.indexOf(a + '.') == 0) {
-          from = a;
-          to = b;
-          break;
-        }
-        if (path.indexOf(b + '.') == 0) {
-          from = b;
-          to = a;
-          break;
-        }
-      }
-      if (from && to) {
-        var p = this._fixPath(to, from, path);
-        this.notifyPath(p, value);
-      }
-    },
-
-    _fixPath: function(property, root, path) {
-      return property + path.slice(root.length);
-    },
-
-    _notifyPath: function(path, value) {
-      var rootName = this._modelForPath(path);
-      var dashCaseName = Polymer.CaseMap.camelToDashCase(rootName);
-      var eventName = dashCaseName + this._EVENT_CHANGED;
-      this.fire(eventName, {
-        path: path,
-        value: value
-      }, null, false);
-    },
-
-    _modelForPath: function(path) {
-      return path.split('.').shift();
-    },
-
-    _EVENT_CHANGED: '-changed',
-
-  });
-
-</script>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../lib/case-map.html">
+<script>
+
+  /**
+   * Changes to an object sub-field (aka "path") via a binding
+   * (e.g. `<x-foo value="{{item.subfield}}"`) will notify other elements bound to
+   * the same object automatically.
+   *
+   * When modifying a sub-field of an object imperatively
+   * (e.g. `this.item.subfield = 42`), in order to have the new value propagated
+   * to other elements, a special `setPathValue(path, value)` API is provided.
+   * `setPathValue` sets the object field at the path specified, and then notifies the
+   * binding system so that other elements bound to the same path will update.
+   *
+   * Example:
+   *
+   *     Polymer({
+   *
+   *       is: 'x-date',
+   *
+   *       properties: {
+   *         date: {
+   *           type: Object,
+   *           notify: true
+   *          }
+   *       },
+   *
+   *       attached: function() {
+   *         this.date = {};
+   *         setInterval(function() {
+   *           var d = new Date();
+   *           // Required to notify elements bound to date of changes to sub-fields
+   *           // this.date.seconds = d.getSeconds(); <-- Will not notify
+   *           this.setPathValue('date.seconds', d.getSeconds());
+   *           this.setPathValue('date.minutes', d.getMinutes());
+   *           this.setPathValue('date.hours', d.getHours() % 12);
+   *         }.bind(this), 1000);
+   *       }
+   *
+   *     });
+   *
+   *  Allows bindings to `date` sub-fields to update on changes:
+   *
+   *     <x-date date="{{date}}"></x-date>
+   *
+   *     Hour: <span>{{date.hours}}</span>
+   *     Min:  <span>{{date.minutes}}</span>
+   *     Sec:  <span>{{date.seconds}}</span>
+   *
+   * @class data feature: path notification
+   */
+
+  Polymer.Base.addFeature({
+    /**
+      Notify that a path has changed. For example:
+
+          this.item.user.name = 'Bob';
+          this.notifyPath('item.user.name', this.item.user.name);
+
+      Returns true if notification actually took place, based on
+      a dirty check of whether the new value was already known
+    */
+    notifyPath: function(path, value, fromAbove) {
+      var old = this._propertySet(path, value);
+      // manual dirty checking for now...
+      if (old !== value) {
+        // Extension point
+        if (this._pathChanged) {
+          this._pathChanged(path, value);
+        }
+        console.group(this.localName + '#' + this.id + ' ' + path);
+        // Take path effects at this level for exact path matches,
+        // and notify down for any bindings to a subset of this path
+        this._pathEffector(path, value);
+        // Send event to notify the path change upwards
+        // Optimization: don't notify up if we know the notification
+        // is coming from above already (avoid wasted event dispatch)
+        if (!fromAbove) {
+          // TODO(sorvell): should only notify if notify: true?
+          this._notifyPath(path, value);
+        }
+        console.groupEnd(this.localName + '#' + this.id + ' ' + path);
+      }
+    },
+
+    /**
+      Convienence method for setting a value to a path and calling
+      notify path
+    */
+    setPathValue: function(path, value) {
+      var parts = path.split('.');
+      if (parts.length > 1) {
+        var last = parts.pop();
+        var prop = this;
+        while (parts.length) {
+          prop = prop[parts.shift()];
+          if (!prop) {
+            return;
+          }
+        }
+        // TODO(kschaaf): want dirty-check here?
+        // if (prop[last] !== value) {
+          prop[last] = value;
+          this.notifyPath(path, value);
+        // }
+      } else {
+        this[path] = value;
+      }
+    },
+
+    getPathValue: function(path, root) {
+      var parts = path.split('.');
+      var last = parts.pop();
+      var prop = root || this;
+      while (parts.length) {
+        prop = prop[parts.shift()];
+        if (!prop) {
+          return;
+        }
+      }
+      return prop[last];
+    },
+
+    addPathObserver: function(path, method) {
+      var fx$ = this._pathEffects || (this._pathEffects = []);
+      var match = path.indexOf('.*') == (path.length-2);
+      if (match) {
+        path = path.slice(0, -2);
+      }
+      fx$.push({path: path, match: match, method: method});
+    },
+
+    // TODO(kschaaf): This machine can be optimized to memoize compiled path
+    // effectors as new paths are notified for performance, since it involves
+    // a fair amount of runtime lookup
+    _pathEffector: function(path, value) {
+      // get root property
+      var model = this._modelForPath(path);
+      // search property effects of the root property for 'annotation' effects
+      var fx$ = this._propertyEffects[model];
+      if (fx$) {
+        fx$.forEach(function(fx) {
+          if (fx.kind === 'annotation') {
+            // locate the bound node
+            var n = this._nodeForBinding(fx.effect);
+            if (n) {
+              // perform the effect
+              this._performAnnotationPathEffect(n, path, value, fx.effect);
+            }
+          }
+        }, this);
+      }
+      // iterate and perform _pathEffects matching path
+      if (this._pathEffects) {
+        this._pathEffects.forEach(function(fx) {
+          this._performPathEffect(path, value, fx);
+        }, this);
+      }
+      // notify runtime-bound paths
+      if (this._boundPaths) {
+        this._notifyBoundPaths(path, value);
+      }
+    },
+
+    _nodeForBinding: function(info) {
+      return info.id ? this.$[info.id] : this._nodes[info.index];
+    },
+
+    _performAnnotationPathEffect: function(node, path, value, effect) {
+      if (effect.value === path || effect.value.indexOf(path + '.') === 0) {
+        // TODO(sorvell): ideally the effect function is on this prototype
+        // so we don't have to call it like this.
+        Polymer.Bind.annotationEffect.call(this, path, value, effect);
+        // path == item.stuff.count
+        // value == item.stuff
+        // name == zizz
+        // calls effect n.notifyPath for zizz.count
+      } else if ((path.indexOf(effect.value + '.') === 0) &&
+                  node.notifyPath && !effect.negate) {
+        var p = this._fixPath(effect.name , effect.value, path);
+        node.notifyPath(p, value, true);
+      }
+    },
+
+    _performPathEffect: function(path, value, fx) {
+      if (fx.path == path || (fx.match && path.indexOf(fx.path) === 0)) {
+        var fn = this[fx.method];
+        if (fn) {
+          // TODO(kschaaf): sending null for old; no good way to get it?
+          fn.call(this, value, null, path);
+        }
+      }
+    },
+
+    bindPaths: function(to, from) {
+      this._boundPaths = this._boundPaths || {};
+      if (from) {
+        this._boundPaths[to] = from;
+        // this.setPathValue(to, this.getPathValue(from));
+      } else {
+        this.unbindPath(to);
+        // this.setPathValue(to, from);
+      }
+    },
+
+    unbindPaths: function(path) {
+      if (this._boundPaths) {
+        delete this._boundPaths[path];
+      }
+    },
+
+    _notifyBoundPaths: function(path, value) {
+      var from, to;
+      for (var a in this._boundPaths) {
+        var b = this._boundPaths[a];
+        if (path.indexOf(a + '.') == 0) {
+          from = a;
+          to = b;
+          break;
+        }
+        if (path.indexOf(b + '.') == 0) {
+          from = b;
+          to = a;
+          break;
+        }
+      }
+      if (from && to) {
+        var p = this._fixPath(to, from, path);
+        this.notifyPath(p, value);
+      }
+    },
+
+    _fixPath: function(property, root, path) {
+      return property + path.slice(root.length);
+    },
+
+    _notifyPath: function(path, value) {
+      var rootName = this._modelForPath(path);
+      var dashCaseName = Polymer.CaseMap.camelToDashCase(rootName);
+      var eventName = dashCaseName + this._EVENT_CHANGED;
+      this.fire(eventName, {
+        path: path,
+        value: value
+      }, null, false);
+    },
+
+    _modelForPath: function(path) {
+      return path.split('.').shift();
+    },
+
+    _EVENT_CHANGED: '-changed',
+
+  });
+
+</script>
\ No newline at end of file
diff --git a/test/smoke/x-if.html b/test/smoke/x-if.html
index 887f9e10b9..bdad8ee94e 100644
--- a/test/smoke/x-if.html
+++ b/test/smoke/x-if.html
@@ -23,19 +23,21 @@
       }
     </style>
     <template>
-      if <input type="checkbox" on-change="checkboxChange">
+      if <input type="checkbox" checked="{{checked::change}}">
+      <br><br>
+      <input value="{{value::input}}">
 
-      <template is="x-if" if="[[checked]]" item="{{item}}">
+      <template is="x-if" id="if1" if="[[checked]]">
         <h3>Lazy / hidden</h3>
         <div class="content">
-          <div>I have been <span>{{stamped}}</span></div>
+          <div>I have been <input value="{{parent.value::input}}"></div>
         </div>
       </template>
 
-      <template is="x-if" if="[[checked]]" item="{{item}}" restamp>
+      <template is="x-if" id="if2" if="[[checked]]" restamp>
         <h3>Restamp</h3>
         <div class="content">
-          <div>I have been <span>{{stamped}}</span></div>
+          <div>I have been <input value="{{parent.value::input}}"></div>
         </div>
       </template>
 
@@ -49,13 +51,9 @@ <h3>Restamp</h3>
       is: 'x-test',
 
       properties: {
-        item: {
-          value: function() { return {stamped: 'stamped!'}; }
+        value: {
+          value: 'stamped!'
         }
-      },
-
-      checkboxChange: function(e) {
-        this.checked = e.target.checked;
       }
 
     });
diff --git a/test/smoke/x-repeat.html b/test/smoke/x-repeat.html
new file mode 100644
index 0000000000..7fc66b2b34
--- /dev/null
+++ b/test/smoke/x-repeat.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>x-repeat</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="../../../layout/layout.html">
+
+</head>
+<body>
+
+<style>
+  body {
+    font-family: sans-serif;
+    font-size: 14px;
+  }
+</style>
+
+<dom-module id="x-labeled-input">
+  <style>
+    :host {
+      width: 400px
+    }
+    #label {
+      width: 200px;
+      overflow: hidden;
+      border-bottom: 1px solid gray;
+      border-bottom-style: dashed;
+    }
+    input {
+      margin-right: 5px;
+    }
+  </style>
+  <template>
+    <div class="layout horizontal">
+      <span id="label" class="flex">{{label}}</span>
+      <input value="{{value::input}}">
+    </div>
+  </template>
+</dom-module>
+
+
+<dom-module id="x-test">
+  <style>
+    .outer {
+      padding: 10px;
+    }
+    .column {
+      width: 400px;
+      overflow: auto;
+    }
+    .item {
+      margin: 5px;
+      margin-left: 10px;
+      margin-right: 0;
+      padding: 5px;
+      padding-right: 0;
+      background-color: rgba(0,0,0,0.1);
+    }
+    .index {
+      display: inline-block;
+      background-color: gray;
+      color: white;
+      padding: 4px;
+      margin-bottom: 4px;
+      border-radius: 4px;
+    }
+  </style>
+  <template>
+
+    <div class="fit layout vertical">
+
+      <div class="outer">
+        <div class="index">Outer scope:</div>
+        <x-labeled-input label="outer1" value="{{outer1}}"></x-labeled-input>
+        <x-labeled-input label="outer2" value="{{outer2}}"></x-labeled-input>
+        <x-labeled-input label="outer3" value="{{outer3}}"></x-labeled-input>
+        <x-labeled-input label="outerObj1.value" value="{{outerObj1.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObj2.value" value="{{outerObj2.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObj3.value" value="{{outerObj3.value}}"></x-labeled-input>
+      </div>
+
+      <div class="layout horizontal flex">
+
+        <div class="column flex">
+          <template is="x-repeat" id="xr1-1" idx$="{{index}}" items="{{items}}">
+            <div class="item">
+              <div class="index">idx: <span>{{index}}</span></div>
+              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+              <x-labeled-input label="parent.outer1" value="{{parent.outer1}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObj1.value" value="{{parent.outerObj1.value}}"></x-labeled-input>
+              <template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}">
+                <div class="item">
+                  <div class="index">idx: <span>{{index}}</span></div>
+                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outer2" value="{{parent.parent.outer2}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObj2.value" value="{{parent.parent.outerObj2.value}}"></x-labeled-input>
+                  <template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{item.items}}">
+                    <div class="item">
+                      <div class="index">idx: <span>{{index}}</span></div>
+                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outer3" value="{{parent.parent.parent.outer3}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObj3.value" value="{{parent.parent.parent.outerObj3.value}}"></x-labeled-input>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+
+        <div class="column flex">
+          <template is="x-repeat" id="xr2-1" idx$="{{index}}" items="{{items}}">
+            <div class="item">
+              <div class="index">idx: <span>{{index}}</span></div>
+              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+              <x-labeled-input label="parent.outer1" value="{{parent.outer1}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObj1.value" value="{{parent.outerObj1.value}}"></x-labeled-input>
+              <template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}">
+                <div class="item">
+                  <div class="index">idx: <span>{{index}}</span></div>
+                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outer2" value="{{parent.parent.outer2}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObj2.value" value="{{parent.parent.outerObj2.value}}"></x-labeled-input>
+                  <template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{item.items}}">
+                    <div class="item">
+                      <div class="index">idx: <span>{{index}}</span></div>
+                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outer3" value="{{parent.parent.parent.outer3}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObj3.value" value="{{parent.parent.parent.outerObj3.value}}"></x-labeled-input>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+
+      </div>
+
+    </div>
+
+  </template>
+</dom-module>
+
+<script>
+  HTMLImports.whenReady(function() {
+
+    Polymer ({
+      is: 'x-labeled-input',
+      properties: {
+        value: {
+          notify: true
+        },
+        label: String
+      }
+    });
+
+    Polymer ({
+      is: 'x-test',
+      properties: {
+        items: {
+          value: function() {
+            return [
+              {name: 'item 1', items: [
+                {name: 'item 1-1', items: [
+                  {name: 'item 1-1-1'},
+                  {name: 'item 1-1-2'},
+                  {name: 'item 1-1-3'}
+                ]},
+                {name: 'item 1-2', items: [
+                  {name: 'item 1-2-1'},
+                  {name: 'item 1-2-2'},
+                  {name: 'item 1-2-3'}
+                ]},
+                {name: 'item 1-3', items: [
+                  {name: 'item 1-3-1'},
+                  {name: 'item 1-3-2'},
+                  {name: 'item 1-3-3'}
+                ]}
+              ]},
+              {name: 'item 2', items: [
+                {name: 'item 2-1', items: [
+                  {name: 'item 2-1-1'},
+                  {name: 'item 2-1-2'},
+                  {name: 'item 2-1-3'}
+                ]},
+                {name: 'item 2-2', items: [
+                  {name: 'item 2-2-1'},
+                  {name: 'item 2-2-2'},
+                  {name: 'item 2-2-3'}
+                ]},
+                {name: 'item 2-3', items: [
+                  {name: 'item 2-3-1'},
+                  {name: 'item 2-3-2'},
+                  {name: 'item 2-3-3'}
+                ]}
+              ]},
+              {name: 'item 3', items: [
+                {name: 'item 3-1', items: [
+                  {name: 'item 3-1-1'},
+                  {name: 'item 3-1-2'},
+                  {name: 'item 3-1-3'}
+                ]},
+                {name: 'item 3-2', items: [
+                  {name: 'item 3-2-1'},
+                  {name: 'item 3-2-2'},
+                  {name: 'item 3-2-3'}
+                ]},
+                {name: 'item 3-3', items: [
+                  {name: 'item 3-3-1'},
+                  {name: 'item 3-3-2'},
+                  {name: 'item 3-3-3'}
+                ]},
+              ]}
+            ];
+          }
+        },
+        outer1: {
+          value: 'outer1'
+        },
+        outer2: {
+          value: 'outer2'
+        },
+        outer3: {
+          value: 'outer3'
+        },
+        outerObj1: {
+          value: function() { return { value: 'outerObj1.value' }; }
+        },
+        outerObj2: {
+          value: function() { return { value: 'outerObj2.value' }; }
+        },
+        outerObj3: {
+          value: function() { return { value: 'outerObj3.value' }; }
+        }
+      }
+    });
+
+  });
+</script>
+
+<x-test class="fit"></x-test>
\ No newline at end of file

From 4082d24ca7b92569257e22848d0e7d5d92bc45b5 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 3 Apr 2015 16:06:29 -0700
Subject: [PATCH 05/13] Fix prefixing.  Remove logs.

---
 src/lib/annotations/annotations.html | 1 -
 src/lib/template/templatizer.html    | 2 +-
 src/standard/notify-path.html        | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index 07962b63f3..f4e3d9b8d3 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -151,7 +151,6 @@
             // these properties as appropriate
             var bindings = [];
             this._discoverTemplateParentProps(content);
-            console.log(node, content._parentProps);
             for (var prop in content._parentProps) {
               bindings.push({
                 index: i,
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 638d7cbd57..43a05ec3e3 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -107,7 +107,7 @@
         if (sub == subPath) {
           host.host[sub] = value;
         } else {
-          host.host.notifyPath(subPath, value);
+          host.notifyPath('_parent_' + subPath, value);
         }        
       }
       // Extension point for Templatizer sub-classes
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index 587b42cb7e..d67cdaac39 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -77,7 +77,7 @@
         if (this._pathChanged) {
           this._pathChanged(path, value);
         }
-        console.group(this.localName + '#' + this.id + ' ' + path);
+        // console.group(this.localName + '#' + this.id + ' ' + path);
         // Take path effects at this level for exact path matches,
         // and notify down for any bindings to a subset of this path
         this._pathEffector(path, value);
@@ -88,7 +88,7 @@
           // TODO(sorvell): should only notify if notify: true?
           this._notifyPath(path, value);
         }
-        console.groupEnd(this.localName + '#' + this.id + ' ' + path);
+        // console.groupEnd(this.localName + '#' + this.id + ' ' + path);
       }
     },
 

From c615c25b2982ce2ce777b95b1ac6061d58fe097d Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 3 Apr 2015 16:38:17 -0700
Subject: [PATCH 06/13] Remove unnecessary extension points.

---
 src/lib/template/templatizer.html | 13 ++++-------
 src/lib/template/x-repeat.html    | 39 ++++++++++++++-----------------
 src/standard/notify-path.html     |  8 ++-----
 3 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 43a05ec3e3..257a8a4a63 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -111,22 +111,19 @@
         }        
       }
       // Extension point for Templatizer sub-classes
-      if (host._handleInstancePath) {
-        host._handleInstancePath.call(host, this, root, subPath, value);
+      if (host._forwardInstancePath) {
+        host._forwardInstancePath.call(host, this, root, subPath, value);
       }
     },
 
-    // Implements extension point from Base notify-path module
-    _pathChanged: function(path, value, fromAbove) {
+    // Overrides Base notify-path module
+    _pathEffector: function(path, value, fromAbove) {
       if (this._forwardParentPath) {
         if (path.indexOf('_parent_') === 0) {
           this._forwardParentPath(path.substring(8), value);
         }
       }
-      // Extension point for Templatizer sub-classes
-      if (this._handleParentPath) {
-        this._handleParentPath(path, value);
-      }
+      Polymer.Base._pathEffector.apply(this, arguments);
     },
 
     _constructorImpl: function(model) {
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index d2590cc5d8..5d8f0d0197 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -102,8 +102,7 @@
        * to stamp and that that each template instance should bind to.
        */
       items: {
-        type: Array,
-        observer: '_itemsChanged'
+        type: Array
       },
 
       /**
@@ -156,6 +155,10 @@
       Polymer.Templatizer
     ],
 
+    observers: {
+      'items.*': '_itemsChanged'
+    },
+
     created: function() {
       this.boundCollectionObserver = this.render.bind(this);
     },
@@ -190,13 +193,18 @@
         this.observe.replace('.*', '.').split(' ');
     },
 
-    _itemsChanged: function(items, old) {
-      if (old) {
-        this._unobserveCollection(old);
-      }
-      if (items) {
-        this._observeCollection(items);
-        this.debounce('render', this.render);
+    _itemsChanged: function(items, old, path) {
+      if (path) {
+        this._notifyItemChanged(path, items);
+        this._checkObservedPaths(path);
+      } else {
+        if (old) {
+          this._unobserveCollection(old);
+        }
+        if (items) {
+          this._observeCollection(items);
+          this.debounce('render', this.render);
+        }        
       }
     },
 
@@ -443,23 +451,12 @@
     // Implements extension point from Templatizer
     // Called as a side effect of a template instance path change, responsible 
     // for notifying items.<key-for-row>.<path> change up to host
-    _handleInstancePath: function(row, root, subPath, value) {
+    _forwardInstancePath: function(row, root, subPath, value) {
       if (root == 'item') {
         this.notifyPath('items.' + row.key + '.' + subPath, value);
       }
     },
 
-    // Implements extension point from Templatizer
-    // Called as a side effect of a host path change, and performs actions
-    // required when items.* changes (notify specific row & check observed
-    // paths), then calls Templatizer to check for parent path changes
-    _handleParentPath: function(path, value) {
-      if (path.indexOf('items.') === 0) {
-        this._notifyItemChanged(path, value);
-        this._checkObservedPaths(path);
-      }
-    },
-
     // Implements extension point from Templatizer mixin
     // Called as side-effect of a host property change, responsible for
     // notifying parent.<prop> path change on each row
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index d67cdaac39..67d584b163 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -73,11 +73,7 @@
       var old = this._propertySet(path, value);
       // manual dirty checking for now...
       if (old !== value) {
-        // Extension point
-        if (this._pathChanged) {
-          this._pathChanged(path, value);
-        }
-        // console.group(this.localName + '#' + this.id + ' ' + path);
+        //console.group(this.localName + '#' + this.id + ' ' + path);
         // Take path effects at this level for exact path matches,
         // and notify down for any bindings to a subset of this path
         this._pathEffector(path, value);
@@ -88,7 +84,7 @@
           // TODO(sorvell): should only notify if notify: true?
           this._notifyPath(path, value);
         }
-        // console.groupEnd(this.localName + '#' + this.id + ' ' + path);
+        //console.groupEnd(this.localName + '#' + this.id + ' ' + path);
       }
     },
 

From b78111136a07e42f5ec9b6fe9097f6fb3a6701ed Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Mon, 6 Apr 2015 20:39:26 -0700
Subject: [PATCH 07/13] Merge with host changes, integrate with x-list.

---
 polymer.html                         |   1 +
 src/lib/annotations/annotations.html |  12 +-
 src/lib/template/templatizer.html    |  37 ++-
 src/lib/template/x-if.html           |  14 +-
 src/lib/template/x-repeat.html       |  21 +-
 src/mini/ready.html                  | 368 ++++++++++++++-------------
 6 files changed, 248 insertions(+), 205 deletions(-)

diff --git a/polymer.html b/polymer.html
index 0bdf74b521..fe5ed6732b 100644
--- a/polymer.html
+++ b/polymer.html
@@ -57,3 +57,4 @@
 <link rel="import" href="src/lib/template/x-template.html">
 <link rel="import" href="src/lib/template/x-repeat.html">
 <link rel="import" href="src/lib/template/x-array-selector.html">
+<link rel="import" href="src/lib/template/x-if.html">
diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index f4e3d9b8d3..997e695603 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -186,13 +186,11 @@
       content._annotes.forEach(function(n) {
         n.bindings.forEach(function(b) {
           var m;
-          if (m = b.value.match(/parent\.((parent\.)*)([^.]*)/)) {
-            var depth = m[1].length / 7; // 'parent.'.length == 7
-            var pp = parentProps[depth] || (parentProps[depth] = {});
-            pp[m[3]] = true;
-            if (depth > 0) {
-              pp = parentProps[0] || (parentProps[0] = {});
-              pp.parent = true;
+          if (m = b.value.match(/parent\.((parent\.)*[^.]*)/)) {
+            m = m[1].split('.');
+            for (var i=0; i<m.length; i++) {
+              var pp = parentProps[i] || (parentProps[i] = {});
+              pp[m[i]] = true;
             }
           }
         });
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 257a8a4a63..f4c32a730a 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -13,6 +13,7 @@
   Polymer.Templatizer = {
 
     templatize: function(template) {
+      this._templatized = template;
       // TODO(sjmiles): supply _alternate_ content reference missing from root
       // templates (not nested). `_content` exists to provide content sharing
       // for nested templates.
@@ -64,6 +65,20 @@
       return (this.host && this.host.contentHost) || this.host;
     },
 
+    _getAllStampedChildren: function(children) {
+      children = children || [];
+      if (this._getStampedChildren) {
+        var c$ = this._getStampedChildren();
+        for (var i=0, c; c = c$[i]; i++) {
+          children.push(c);
+          if (c._getAllStampedChildren) {
+            c._getAllStampedChildren(children);
+          }
+        }
+      }
+      return children;
+    },
+
     customPrepAnnotations: function(archetype, template) {
       if (template) {
         archetype._template = template;
@@ -83,13 +98,20 @@
 
     _prepParentProperties: function(parentProps) {
       if (this._forwardParentProp) {
+        if (this._templatized != this) {
+          // templatized template is probably not a Polymer.Base...
+          Polymer.Bind.prepareModel(this._templatized);
+          Polymer.Bind.prepareInstance(this._templatized);
+          this._templatized._forwardParentProp =
+            this._forwardParentProp.bind(this);
+        }
         if (this._parentProps = parentProps) {
           for (var prop in parentProps) {
             var parentProp = '_parent_' + prop;
-            var val = this[parentProp];
-            Polymer.Bind._bindPropertyEffects(this, parentProp,
-              ['this._forwardParentProp(\'' + prop + '\')']);
-            this._setData(parentProp, val);
+            var val = this._templatized[parentProp];
+            Polymer.Bind._bindPropertyEffects(this._templatized, parentProp,
+              ['this._forwardParentProp(\'' + prop + '\', this._data.' + parentProp + ')']);
+            this._templatized._setData(parentProp, val);
           }
         }
       }
@@ -102,10 +124,10 @@
       var sub = p[3];     // 'sub'
       var subPath = p[2]; // 'sub.path'
       // Notify host of parent.* path/property changes
-      var host = this._host;
+      var host = this._dataHost;
       if (root == 'parent') {
         if (sub == subPath) {
-          host.host[sub] = value;
+          host._dataHost[sub] = value;
         } else {
           host.notifyPath('_parent_' + subPath, value);
         }        
@@ -130,6 +152,7 @@
       this._setupConfigure(model);
       this._pushHost(this.host);
       this.root = this.instanceTemplate(this._template);
+      this.root.__styleScoped = true;
       this._popHost();
       this._marshalAnnotatedNodes();
       this._marshalInstanceEffects();
@@ -139,8 +162,6 @@
 
     stamp: function(model) {
       model = model || {};
-      // TODO(kschaaf): temporary workaround to have the correct "binding" host
-      model._host = this;
       if (this._parentProps) {
         model.parent = model.parent || {};
         for (var prop in this._parentProps) {
diff --git a/src/lib/template/x-if.html b/src/lib/template/x-if.html
index 0a333e525c..eef2519bb4 100644
--- a/src/lib/template/x-if.html
+++ b/src/lib/template/x-if.html
@@ -98,8 +98,13 @@
       }
     },
 
+    // Implements extension point from Templatizer mixin
+    _getStampedChildren: function() {
+      return this._instance._children;
+    },
+
     _showHideInstance: function(showing) {
-      this._instance._children.forEach(function(n) {
+      this._getAllStampedChildren().forEach(function(n) {
         if (n.setAttribute) {
           this.serializeValueToAttribute(!showing, 'hidden', n);
         }
@@ -109,11 +114,10 @@
     // Implements extension point from Templatizer mixin
     // Called as side-effect of a host property change, responsible for
     // notifying parent.<prop> path change on instance
-    _forwardParentProp: function(prop) {
+    _forwardParentProp: function(prop, value) {
       if (this._instance) {
-        var val = this['_parent_' + prop];
-        this._instance.parent[prop] = val;
-        this._instance.notifyPath('parent.' + prop, val, true);
+        this._instance.parent[prop] = value;
+        this._instance.notifyPath('parent.' + prop, value, true);
       }
     },
 
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 5d8f0d0197..18c0a55d25 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -426,7 +426,6 @@
       var beforeRow = this.rows[idx];
       var beforeNode = beforeRow ? beforeRow._children[0] : this;
       var parentNode = Polymer.dom(this).parentNode;
-      row.root.__styleScoped = true;
       Polymer.dom(parentNode).insertBefore(row.root, beforeNode);
       return row;
     },
@@ -448,6 +447,19 @@
       return row;
     },
 
+    // Implements extension point from Templatizer mixin
+    _getStampedChildren: function() {
+      var children = [];
+      if (this.rows) {
+        for (var i=0; i<this.rows.length; i++) {
+          var c = this.rows[i]._children;
+          for (var j=0; j<c.length; j++)
+          children.push(c[j]);
+        }        
+      }
+      return children;
+    },
+
     // Implements extension point from Templatizer
     // Called as a side effect of a template instance path change, responsible 
     // for notifying items.<key-for-row>.<path> change up to host
@@ -460,12 +472,11 @@
     // Implements extension point from Templatizer mixin
     // Called as side-effect of a host property change, responsible for
     // notifying parent.<prop> path change on each row
-    _forwardParentProp: function(prop) {
+    _forwardParentProp: function(prop, value) {
       if (this.rows) {
         this.rows.forEach(function(row) {
-          var val = this['_parent_' + prop];
-          row.parent[prop] = val;
-          row.notifyPath('parent.' + prop, val, true);
+          row.parent[prop] = value;
+          row.notifyPath('parent.' + prop, value, true);
         }, this);        
       }
     },
diff --git a/src/mini/ready.html b/src/mini/ready.html
index 6af602c195..63da1e9dfa 100644
--- a/src/mini/ready.html
+++ b/src/mini/ready.html
@@ -1,180 +1,188 @@
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<script>
-
-  /**
-   * Provides `ready` lifecycle callback which is called parent to child.
-   *
-   * This can be useful in a number of cases. Here are some examples:
-   *
-   * Setting a default property value that should have a side effect: To ensure
-   * the side effect, an element must set a default value no sooner than
-   * `created`; however, since `created` flows child to host, this is before the
-   * host has had a chance to set a property value on the child. The `ready`
-   * method solves this problem since it's called host to child.
-   *
-   * Dom distribution: To support reprojection efficiently, it's important to 
-   * distribute from host to child in one shot. The `attachedCallback` mostly
-   * goes in the desired order except for elements that are in dom to start; in
-   * this case, all children are attached before the host element. Ready also
-   * addresses this case since it's guaranteed to be called host to child.
-   *
-   * @class standard feature: ready
-   */
-
-(function() {
-
-  var baseAttachedCallback = Polymer.Base.attachedCallback;
-  var baseDetachedCallback = Polymer.Base.detachedCallback;
-
-  Polymer.Base.addFeature({
-
-    hostStack: [],
-    _readied: false,
-    _attachedPending: false,
-
-    // for overriding
-    configure: function() {
-    },
-
-    // for overriding
-    ready: function() {
-    },
-
-    /**
-      Returns the host of the local dom in which this element exists.
-      This is a shorthand for Polymer.dom(this).getOwnerRoot().host
-    */
-    get host() {
-      return this._host || (this._host = this._queryHost());
-    },
-
-    set host(value) {
-      this._host = value;
-    },
-
-    _queryHost: function(node) {
-      var ownerRoot = Polymer.dom(this).getOwnerRoot();
-      return ownerRoot && ownerRoot.host;
-    },
-
-    // NOTE: The concept of 'host' is overloaded. There are two different
-    // notions:
-    // 1. an element hosts the elements in its local dom root.
-    // 2. an element hosts the elements on which it configures data.
-    // Practially, these notions are almost always coincident.
-    // Some special elements like templates may separate them.
-    // In order not to over-emphaisize this technical difference, we expose 
-    // one concept to the user and it maps to the dom-related meaning of host.
-    //
-    // 1. set this element's `host` and push this element onto the `host`'s
-    // list of `client` elements
-    // 2. establish this element as the current hosting element (allows 
-    // any elements we stamp to easily set host to us).
-    _pushHost: function(host) {
-      this.host = host = host || 
-        Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
-      if (host && host._clients) {
-        host._clients.push(this);
-      }
-      this._beginHost();
-    },
-
-    _beginHost: function() {
-      Polymer.Base.hostStack.push(this);
-      if (!this._clients) {
-        this._clients = [];
-      }
-    },
-
-    _popHost: function() {
-      // this element is no longer the current hosting element
-      Polymer.Base.hostStack.pop();
-    },
-
-    _readyContent: function() {
-      if (this._canReady()) {
-        this._initializeContent();
-      }
-    },
-
-    _canReady: function() {
-      return !this._readied && (!this.host || this.host._readied);
-    },
-
-    _initializeContent: function() {
-      // prepare root
-      this._setupRoot();
-      // logically distribute self
-      this._beginDistribute();
-      // send data configuration signal
-      this._configure();
-      // now fully prepare localChildren
-      var c$ = this._clients;
-      for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
-        c._initializeContent();
-      }
-      // perform actual dom composition
-      this._finishDistribute();
-      // ensure elements are attached if they are in the dom at ready time
-      // helps normalize attached ordering between native and polyfill ce.
-      // TODO(sorvell): worth perf cost? ~6%
-      // if (!Polymer.Settings.useNativeCustomElements) {
-      //   CustomElements.takeRecords();
-      // }
-      // send ready signal
-      this._ready();
-      // reset _host as it needs to be established by local dom after data
-      // configuration
-      this.host = null;
-      this._clients = null;
-    },
-
-    // calls `configure`
-    // note: called host -> localChild
-    _configure: function() {
-      this.configure();
-    },
-
-    // mark readied and call `ready`
-    // note: called localChildren -> host
-    _ready: function() {
-      this._readied = true;
-      this._beforeReady();
-      this.ready();
-      if (this._attachedPending) {
-        this._attachedPending = false;
-        this.attachedCallback();
-      }
-    },
-
-    // for system overriding
-    _beforeReady: function() {},
-
-    // normalize lifecycle: ensure attached occurs only after ready.
-    attachedCallback: function() {
-      if (this._readied) {
-        baseAttachedCallback.call(this);
-      } else {
-        this._attachedPending = true;
-      }
-    },
-
-    detachedCallback: function() {
-      // uncache host so it will be calculated again.
-      this.host = null;
-      baseDetachedCallback.call(this);
-    }
-
-  });
-
-})();
-
-</script>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+
+  /**
+   * Provides `ready` lifecycle callback which is called parent to child.
+   *
+   * This can be useful in a number of cases. Here are some examples:
+   *
+   * Setting a default property value that should have a side effect: To ensure
+   * the side effect, an element must set a default value no sooner than
+   * `created`; however, since `created` flows child to host, this is before the
+   * host has had a chance to set a property value on the child. The `ready`
+   * method solves this problem since it's called host to child.
+   *
+   * Dom distribution: To support reprojection efficiently, it's important to 
+   * distribute from host to child in one shot. The `attachedCallback` mostly
+   * goes in the desired order except for elements that are in dom to start; in
+   * this case, all children are attached before the host element. Ready also
+   * addresses this case since it's guaranteed to be called host to child.
+   *
+   * @class standard feature: ready
+   */
+
+(function() {
+
+  var baseAttachedCallback = Polymer.Base.attachedCallback;
+  var baseDetachedCallback = Polymer.Base.detachedCallback;
+
+  Polymer.Base.addFeature({
+
+    hostStack: [],
+    _readied: false,
+    _attachedPending: false,
+
+    // for overriding
+    configure: function() {
+    },
+
+    // for overriding
+    ready: function() {
+    },
+
+    /**
+      Returns the host of the local dom in which this element exists.
+      This is a shorthand for Polymer.dom(this).getOwnerRoot().host
+    */
+    get host() {
+      return this._host || (this._host = this._queryHost());
+    },
+
+    set host(value) {
+      this._host = value;
+    },
+
+    _queryHost: function(node) {
+      var ownerRoot = Polymer.dom(this).getOwnerRoot();
+      return ownerRoot && ownerRoot.host;
+    },
+
+    // NOTE: The concept of 'host' is overloaded. There are two different
+    // notions:
+    // 1. an element hosts the elements in its local dom root.
+    // 2. an element hosts the elements on which it configures data.
+    // Practially, these notions are almost always coincident.
+    // Some special elements like templates may separate them.
+    // In order not to over-emphaisize this technical difference, we expose 
+    // one concept to the user and it maps to the dom-related meaning of host.
+    //
+    // 1. set this element's `host` and push this element onto the `host`'s
+    // list of `client` elements
+    // 2. establish this element as the current hosting element (allows 
+    // any elements we stamp to easily set host to us).
+    _pushHost: function(host) {
+      // this.host reflects the parent element whose "local DOM"
+      // this element is contained within. This may change if the element
+      // is appended to a different parent.
+      this.host = host = host || 
+        Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
+      // this._dataHost reflects the parent element who manages
+      // any bindings for the element.  Only elements originally
+      // stamped from Polymer templates have a _dataHost, and this
+      // never changes
+      this._dataHost = host;
+      if (host && host._clients) {
+        host._clients.push(this);
+      }
+      this._beginHost();
+    },
+
+    _beginHost: function() {
+      Polymer.Base.hostStack.push(this);
+      if (!this._clients) {
+        this._clients = [];
+      }
+    },
+
+    _popHost: function() {
+      // this element is no longer the current hosting element
+      Polymer.Base.hostStack.pop();
+    },
+
+    _readyContent: function() {
+      if (this._canReady()) {
+        this._initializeContent();
+      }
+    },
+
+    _canReady: function() {
+      return !this._readied && (!this.host || this.host._readied);
+    },
+
+    _initializeContent: function() {
+      // prepare root
+      this._setupRoot();
+      // logically distribute self
+      this._beginDistribute();
+      // send data configuration signal
+      this._configure();
+      // now fully prepare localChildren
+      var c$ = this._clients;
+      for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
+        c._initializeContent();
+      }
+      // perform actual dom composition
+      this._finishDistribute();
+      // ensure elements are attached if they are in the dom at ready time
+      // helps normalize attached ordering between native and polyfill ce.
+      // TODO(sorvell): worth perf cost? ~6%
+      // if (!Polymer.Settings.useNativeCustomElements) {
+      //   CustomElements.takeRecords();
+      // }
+      // send ready signal
+      this._ready();
+      // reset _host as it needs to be established by local dom after data
+      // configuration
+      this.host = null;
+      this._clients = null;
+    },
+
+    // calls `configure`
+    // note: called host -> localChild
+    _configure: function() {
+      this.configure();
+    },
+
+    // mark readied and call `ready`
+    // note: called localChildren -> host
+    _ready: function() {
+      this._readied = true;
+      this._beforeReady();
+      this.ready();
+      if (this._attachedPending) {
+        this._attachedPending = false;
+        this.attachedCallback();
+      }
+    },
+
+    // for system overriding
+    _beforeReady: function() {},
+
+    // normalize lifecycle: ensure attached occurs only after ready.
+    attachedCallback: function() {
+      if (this._readied) {
+        baseAttachedCallback.call(this);
+      } else {
+        this._attachedPending = true;
+      }
+    },
+
+    detachedCallback: function() {
+      // uncache host so it will be calculated again.
+      this.host = null;
+      baseDetachedCallback.call(this);
+    }
+
+  });
+
+})();
+
+</script>

From bbfbf50893d039ed57f7dbed05059b1f5fa6cb29 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Wed, 8 Apr 2015 17:05:11 -0700
Subject: [PATCH 08/13] Integrate with machined effects.

---
 src/lib/bind/effects.html         |  5 +++++
 src/lib/template/templatizer.html | 21 ++++++++++++++------
 src/lib/template/x-if.html        | 32 +++++++++++++++++--------------
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/lib/bind/effects.html b/src/lib/bind/effects.html
index 2175c306b8..12e7fc044e 100644
--- a/src/lib/bind/effects.html
+++ b/src/lib/bind/effects.html
@@ -36,6 +36,11 @@
       this._notifyChange(source);
     },
 
+    // Raw effect for extension; info.function is an actual function
+    functionEffect: function(source, value, info, old) {
+      info.function.call(this, source, value, info, old);
+    },
+
     observerEffect: function(source, value, info, old) {
       //console.log(value, info);
       if (info.property) {
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index f4c32a730a..03eb1ccd85 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -99,19 +99,28 @@
     _prepParentProperties: function(parentProps) {
       if (this._forwardParentProp) {
         if (this._templatized != this) {
-          // templatized template is probably not a Polymer.Base...
+          // Assumption: if `this` isn't the template being templatized,
+          // assume that the template is not a Poylmer.Base, so prep it
+          // for binding
           Polymer.Bind.prepareModel(this._templatized);
           Polymer.Bind.prepareInstance(this._templatized);
-          this._templatized._forwardParentProp =
-            this._forwardParentProp.bind(this);
         }
         if (this._parentProps = parentProps) {
+          // Create accessors for each parent prop that forward the property
+          // to template instances through abstract _forwardParentProp API
+          // that should be implemented by Templatizer users
           for (var prop in parentProps) {
             var parentProp = '_parent_' + prop;
             var val = this._templatized[parentProp];
-            Polymer.Bind._bindPropertyEffects(this._templatized, parentProp,
-              ['this._forwardParentProp(\'' + prop + '\', this._data.' + parentProp + ')']);
-            this._templatized._setData(parentProp, val);
+            var effects = [{
+              kind: 'function',
+              effect: { function: function(prop, source, value) {
+                this._forwardParentProp(prop, value);
+              }.bind(this, prop)}
+            }];
+            Polymer.Bind._createAccessors(this._templatized,
+              parentProp, effects);
+            this._templatized._propertySet(parentProp, val);
           }
         }
       }
diff --git a/src/lib/template/x-if.html b/src/lib/template/x-if.html
index eef2519bb4..d4c1bdd610 100644
--- a/src/lib/template/x-if.html
+++ b/src/lib/template/x-if.html
@@ -32,11 +32,13 @@
     properties: {
 
       'if': {
-        type: Boolean
+        type: Boolean,
+        value: false
       },
 
       restamp: {
-        type: Boolean
+        type: Boolean,
+        value: false
       }
 
     },
@@ -50,18 +52,20 @@
     },
 
     render: function() {
-      if (!this.ctor) {
-        this._wrapTextNodes(this._content);
-        this.templatize(this);
-      }
-      if (this.if) {
-        this._ensureInstance();
-      } else if (this.restamp) {
-        this._teardownInstance();
-      }
-      if (!this.restamp && this._instance) {
-        this._showHideInstance(this.if);
-      }
+      this.debounce('render', function() {
+        if (!this.ctor) {
+          this._wrapTextNodes(this._content);
+          this.templatize(this);
+        }
+        if (this.if) {
+          this._ensureInstance();
+        } else if (this.restamp) {
+          this._teardownInstance();
+        }
+        if (!this.restamp && this._instance) {
+          this._showHideInstance(this.if);
+        }
+      });
     },
 
     _ensureInstance: function() {

From 58f4f037495df8cba645d309e1f430c6354e006e Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Wed, 8 Apr 2015 17:53:50 -0700
Subject: [PATCH 09/13] Improve readability.

---
 src/lib/annotations/annotations.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index 997e695603..913d4432f0 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -182,15 +182,15 @@
     },
 
     _discoverTemplateParentProps: function(content) {
-      var parentProps = content._parentPropChain = [];
+      var chain = content._parentPropChain = [];
       content._annotes.forEach(function(n) {
         n.bindings.forEach(function(b) {
           var m;
           if (m = b.value.match(/parent\.((parent\.)*[^.]*)/)) {
-            m = m[1].split('.');
-            for (var i=0; i<m.length; i++) {
-              var pp = parentProps[i] || (parentProps[i] = {});
-              pp[m[i]] = true;
+            var parts = m[1].split('.');
+            for (var i=0; i<parts.length; i++) {
+              var pp = chain[i] || (chain[i] = {});
+              pp[parts[i]] = true;
             }
           }
         });
@@ -198,13 +198,13 @@
           var tpp = n.templateContent._parentPropChain;
           for (var i=1; i<tpp.length; i++) {
             if (tpp[i]) {
-              var pp = parentProps[i-1] || (parentProps[i-1] = {});
+              var pp = chain[i-1] || (chain[i-1] = {});
               Polymer.Base.simpleMixin(pp, tpp[i]);              
             }
           }
         }
       });
-      content._parentProps = parentProps[0];
+      content._parentProps = chain[0];
     },
 
     // add annotation data from attributes to the `annotation` for node `node`

From e938d4242b8a12b40a206a7c1d92c011d7cf51ca Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Thu, 9 Apr 2015 18:10:04 -0700
Subject: [PATCH 10/13] Fix bug with archetype host.  Bind computed to
 rootDataHost if defined.

---
 src/lib/bind/effects.html         |   6 +-
 src/lib/template/templatizer.html |  32 ++++-----
 src/lib/template/x-repeat.html    |   4 +-
 src/mini/ready.html               |   6 +-
 src/standard/notify-path.html     |   4 +-
 test/smoke/x-repeat.html          | 116 +++++++++++++++++++-----------
 6 files changed, 103 insertions(+), 65 deletions(-)

diff --git a/src/lib/bind/effects.html b/src/lib/bind/effects.html
index 12e7fc044e..f9b8201daa 100644
--- a/src/lib/bind/effects.html
+++ b/src/lib/bind/effects.html
@@ -63,8 +63,10 @@
     annotatedComputationEffect: function(source, value, info) {
       var args = Polymer.Bind._marshalArgs(this._data, info.args);
       if (args) {
-        var value = this[info.methodName].apply(this, args);
-        this._applyEffectValue(value, info);
+        var computedHost = this._rootDataHost || this;
+        var computedvalue = 
+          computedHost[info.methodName].apply(computedHost, args);
+        this._applyEffectValue(computedvalue, info);
       }
     },
 
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 03eb1ccd85..1bd7aaca11 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -31,8 +31,8 @@
       // `archetype` is the prototype of the anonymous
       // class created by the templatizer 
       var archetype = Object.create(Polymer.Base);
-      archetype.host = this;
-      archetype.contentHost = this._getContentHost();
+      var rootDataHost = this._getRootDataHost();
+      archetype._rootDataHost = rootDataHost;
       // normally Annotations.parseAnnotations(template) but
       // archetypes do special caching
       this.customPrepAnnotations(archetype, template);
@@ -41,16 +41,14 @@
       // forward parent properties to archetype
       this._prepParentProperties(archetype._parentProps);
       // late-binds archetype.listen to host.listen; h.l doesn't exist yet
-      archetype.listen = function() { 
-        this.listen.apply(this, arguments);
-      }.bind(this.host);
+      archetype.listen = rootDataHost.listen.bind(rootDataHost);
 
       // boilerplate code
       archetype._notifyPath = this._notifyPathImpl;
       // boilerplate code
       var _constructor = this._constructorImpl;
-      var ctor = function TemplateInstance(model) {
-        _constructor.call(this, model);
+      var ctor = function TemplateInstance(model, host) {
+        _constructor.call(this, model, host);
       };
       // standard references
       ctor.prototype = archetype;
@@ -61,8 +59,8 @@
       this.ctor = ctor;
     },
 
-    _getContentHost: function() {
-      return (this.host && this.host.contentHost) || this.host;
+    _getRootDataHost: function() {
+      return (this.dataHost && this.dataHost._rootDataHost) || this.dataHost;
     },
 
     _getAllStampedChildren: function(children) {
@@ -133,17 +131,17 @@
       var sub = p[3];     // 'sub'
       var subPath = p[2]; // 'sub.path'
       // Notify host of parent.* path/property changes
-      var host = this._dataHost;
+      var dataHost = this.dataHost;
       if (root == 'parent') {
         if (sub == subPath) {
-          host._dataHost[sub] = value;
+          dataHost.dataHost[sub] = value;
         } else {
-          host.notifyPath('_parent_' + subPath, value);
+          dataHost.notifyPath('_parent_' + subPath, value);
         }        
       }
       // Extension point for Templatizer sub-classes
-      if (host._forwardInstancePath) {
-        host._forwardInstancePath.call(host, this, root, subPath, value);
+      if (dataHost._forwardInstancePath) {
+        dataHost._forwardInstancePath.call(dataHost, this, root, subPath, value);
       }
     },
 
@@ -157,9 +155,9 @@
       Polymer.Base._pathEffector.apply(this, arguments);
     },
 
-    _constructorImpl: function(model) {
+    _constructorImpl: function(model, host) {
       this._setupConfigure(model);
-      this._pushHost(this.host);
+      this._pushHost(host);
       this.root = this.instanceTemplate(this._template);
       this.root.__styleScoped = true;
       this._popHost();
@@ -177,7 +175,7 @@
           model.parent[prop] = this['_parent_' + prop];
         }        
       }
-      return new this.ctor(model);
+      return new this.ctor(model, this);
     }
 
     // TODO(sorvell): note, using the template as host is ~5-10% faster if 
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 18c0a55d25..b5b023a25b 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -260,13 +260,13 @@
         var key = keys[i];
         var item = c.getItem(key);
         var row = this.rows[i];
+        rowForKey[key] = i;
         if (!row) {
           this.rows.push(row = this._insertRow(i, null, item));
         }
         row.item = item;
         row.key = key;
         row.index = i;
-        rowForKey[key] = i;
       }
       // Remove extra
       for (; i<this.rows.length; i++) {
@@ -432,6 +432,8 @@
 
     _generateRow: function(idx, item) {
       var row = this.stamp({
+        index: idx,
+        key: this.collection.getKey(item),
         item: item
       });
       // each row is a document fragment which is lost when we appendChild,
diff --git a/src/mini/ready.html b/src/mini/ready.html
index 63da1e9dfa..e73d2a58d3 100644
--- a/src/mini/ready.html
+++ b/src/mini/ready.html
@@ -84,11 +84,11 @@
       // is appended to a different parent.
       this.host = host = host || 
         Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
-      // this._dataHost reflects the parent element who manages
+      // this.dataHost reflects the parent element who manages
       // any bindings for the element.  Only elements originally
-      // stamped from Polymer templates have a _dataHost, and this
+      // stamped from Polymer templates have a dataHost, and this
       // never changes
-      this._dataHost = host;
+      this.dataHost = host;
       if (host && host._clients) {
         host._clients.push(this);
       }
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index 67d584b163..5372921a98 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -73,7 +73,7 @@
       var old = this._propertySet(path, value);
       // manual dirty checking for now...
       if (old !== value) {
-        //console.group(this.localName + '#' + this.id + ' ' + path);
+        // console.group((this.localName || this.dataHost.id + '-' + this.dataHost.dataHost.index) + '#' + (this.id || this.index) + ' ' + path, value);
         // Take path effects at this level for exact path matches,
         // and notify down for any bindings to a subset of this path
         this._pathEffector(path, value);
@@ -84,7 +84,7 @@
           // TODO(sorvell): should only notify if notify: true?
           this._notifyPath(path, value);
         }
-        //console.groupEnd(this.localName + '#' + this.id + ' ' + path);
+        // console.groupEnd((this.localName || this.dataHost.id + '-' + this.dataHost.dataHost.index) + '#' + (this.id || this.index) + ' ' + path, value);
       }
     },
 
diff --git a/test/smoke/x-repeat.html b/test/smoke/x-repeat.html
index 7fc66b2b34..1dc62c39ba 100644
--- a/test/smoke/x-repeat.html
+++ b/test/smoke/x-repeat.html
@@ -7,6 +7,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <script src="../../../perf-lib/perf.js"></script>
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../polymer.html">
   <link rel="import" href="../../../layout/layout.html">
@@ -39,7 +40,7 @@
   <template>
     <div class="layout horizontal">
       <span id="label" class="flex">{{label}}</span>
-      <input value="{{value::input}}">
+      <input value="{{value::input}}" disabled$="{{disabled}}">
     </div>
   </template>
 </dom-module>
@@ -77,35 +78,44 @@
 
       <div class="outer">
         <div class="index">Outer scope:</div>
-        <x-labeled-input label="outer1" value="{{outer1}}"></x-labeled-input>
-        <x-labeled-input label="outer2" value="{{outer2}}"></x-labeled-input>
-        <x-labeled-input label="outer3" value="{{outer3}}"></x-labeled-input>
-        <x-labeled-input label="outerObj1.value" value="{{outerObj1.value}}"></x-labeled-input>
-        <x-labeled-input label="outerObj2.value" value="{{outerObj2.value}}"></x-labeled-input>
-        <x-labeled-input label="outerObj3.value" value="{{outerObj3.value}}"></x-labeled-input>
+        <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
+        <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
+        <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
+        <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
       </div>
 
       <div class="layout horizontal flex">
 
         <div class="column flex">
-          <template is="x-repeat" id="xr1-1" idx$="{{index}}" items="{{items}}">
-            <div class="item">
+          <template is="x-repeat" id="xr1-1" items="{{items}}">
+            <div class="item" id="xr1-1" idx$="{{index}}">
               <div class="index">idx: <span>{{index}}</span></div>
+              <button on-click="handleClickA">Change outerA</button>
               <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-              <x-labeled-input label="parent.outer1" value="{{parent.outer1}}"></x-labeled-input>
-              <x-labeled-input label="parent.outerObj1.value" value="{{parent.outerObj1.value}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
+              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
+              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
+              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
               <template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}">
-                <div class="item">
+                <div class="item" id="xr1-2" idx$="{{index}}">
                   <div class="index">idx: <span>{{index}}</span></div>
+                  <button on-click="handleClickB">Change outerB</button>
                   <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-                  <x-labeled-input label="parent.parent.outer2" value="{{parent.parent.outer2}}"></x-labeled-input>
-                  <x-labeled-input label="parent.parent.outerObj2.value" value="{{parent.parent.outerObj2.value}}"></x-labeled-input>
+                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
                   <template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{item.items}}">
-                    <div class="item">
+                    <div class="item" id="xr1-3" idx$="{{index}}">
                       <div class="index">idx: <span>{{index}}</span></div>
+                      <button on-click="handleClickC">Change outerC</button>
                       <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-                      <x-labeled-input label="parent.parent.parent.outer3" value="{{parent.parent.parent.outer3}}"></x-labeled-input>
-                      <x-labeled-input label="parent.parent.parent.outerObj3.value" value="{{parent.parent.parent.outerObj3.value}}"></x-labeled-input>
+                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
                     </div>
                   </template>
                 </div>
@@ -116,23 +126,32 @@
 
         <div class="column flex">
           <template is="x-repeat" id="xr2-1" idx$="{{index}}" items="{{items}}">
-            <div class="item">
+            <div class="item" id="xr2-1" idx$="{{index}}">
               <div class="index">idx: <span>{{index}}</span></div>
+              <button on-click="handleClickA">Change outerA</button>
               <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-              <x-labeled-input label="parent.outer1" value="{{parent.outer1}}"></x-labeled-input>
-              <x-labeled-input label="parent.outerObj1.value" value="{{parent.outerObj1.value}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
+              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
+              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
+              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
               <template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}">
-                <div class="item">
+                <div class="item" id="xr2-2" idx$="{{index}}">
                   <div class="index">idx: <span>{{index}}</span></div>
+                  <button on-click="handleClickB">Change outerB</button>
                   <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-                  <x-labeled-input label="parent.parent.outer2" value="{{parent.parent.outer2}}"></x-labeled-input>
-                  <x-labeled-input label="parent.parent.outerObj2.value" value="{{parent.parent.outerObj2.value}}"></x-labeled-input>
+                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
                   <template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{item.items}}">
-                    <div class="item">
+                    <div class="item" id="xr2-3" idx$="{{index}}">
                       <div class="index">idx: <span>{{index}}</span></div>
+                      <button on-click="handleClickC">Change outerC</button>
                       <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
-                      <x-labeled-input label="parent.parent.parent.outer3" value="{{parent.parent.parent.outer3}}"></x-labeled-input>
-                      <x-labeled-input label="parent.parent.parent.outerObj3.value" value="{{parent.parent.parent.outerObj3.value}}"></x-labeled-input>
+                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
                     </div>
                   </template>
                 </div>
@@ -157,7 +176,8 @@
         value: {
           notify: true
         },
-        label: String
+        label: String,
+        disabled: Boolean
       }
     });
 
@@ -221,28 +241,44 @@
             ];
           }
         },
-        outer1: {
-          value: 'outer1'
+        outerA: {
+          value: 'outerA'
         },
-        outer2: {
-          value: 'outer2'
+        outerB: {
+          value: 'outerB'
         },
-        outer3: {
-          value: 'outer3'
+        outerC: {
+          value: 'outerC'
         },
-        outerObj1: {
-          value: function() { return { value: 'outerObj1.value' }; }
+        outerObjA: {
+          value: function() { return { value: 'outerObjA.value' }; }
         },
-        outerObj2: {
-          value: function() { return { value: 'outerObj2.value' }; }
+        outerObjB: {
+          value: function() { return { value: 'outerObjB.value' }; }
         },
-        outerObj3: {
-          value: function() { return { value: 'outerObj3.value' }; }
+        outerObjC: {
+          value: function() { return { value: 'outerObjC.value' }; }
         }
+      },
+      handleClickA: function() {
+        this.outerA = this.outerA + 'A';
+      },
+      handleClickB: function() {
+        this.outerB = this.outerB + 'B';
+      },
+      handleClickC: function() {
+        this.outerC = this.outerC + 'C';
+      },
+      computeInner: function(a, b) {
+        return a + '-' + b;
       }
     });
 
   });
 </script>
 
-<x-test class="fit"></x-test>
\ No newline at end of file
+<script>console.perf && console.perf();</script>
+
+<x-test class="fit"></x-test>
+
+<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>

From 2ee7b278ad023fc391482688d4a0266e66a0fe91 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 10 Apr 2015 14:10:21 -0700
Subject: [PATCH 11/13] Memoize template accessors.

---
 src/lib/template/templatizer.html | 57 ++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 1bd7aaca11..698ef36395 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -25,7 +25,7 @@
         this.ctor = template._content._ctor;
         //console.log('Templatizer.templatize: using memoized archetype');
         // forward parent properties to archetype
-        this._prepParentProperties(this.ctor.prototype._parentProps);
+        this._prepParentProperties(this.ctor.prototype);
         return;
       }
       // `archetype` is the prototype of the anonymous
@@ -39,7 +39,7 @@
       // setup accessors
       archetype._prepEffects();
       // forward parent properties to archetype
-      this._prepParentProperties(archetype._parentProps);
+      this._prepParentProperties(archetype);
       // late-binds archetype.listen to host.listen; h.l doesn't exist yet
       archetype.listen = rootDataHost.listen.bind(rootDataHost);
 
@@ -94,36 +94,61 @@
       }
     },
 
-    _prepParentProperties: function(parentProps) {
-      if (this._forwardParentProp) {
-        if (this._templatized != this) {
-          // Assumption: if `this` isn't the template being templatized,
-          // assume that the template is not a Poylmer.Base, so prep it
-          // for binding
-          Polymer.Bind.prepareModel(this._templatized);
-          Polymer.Bind.prepareInstance(this._templatized);
-        }
-        if (this._parentProps = parentProps) {
+    // Sets up accessors on the template to call abstract _forwardParentProp
+    // API that should be implemented by Templatizer users to get parent
+    // properties to their template instances.  These accessors are memoized 
+    // on the archetype and copied to instances.
+    _prepParentProperties: function(archetype) {
+      var parentProps = this._parentProps = archetype._parentProps;
+      if (this._forwardParentProp && parentProps) {
+
+        // Prototype setup (memoized on archetype)
+        var proto = archetype._parentPropProto;
+        if (!proto) {
+          proto = archetype._parentPropProto = Object.create(null);
+          if (this._templatized != this) {
+            // Assumption: if `this` isn't the template being templatized,
+            // assume that the template is not a Poylmer.Base, so prep it
+            // for binding
+            Polymer.Bind.prepareModel(proto);
+          }
           // Create accessors for each parent prop that forward the property
           // to template instances through abstract _forwardParentProp API
           // that should be implemented by Templatizer users
           for (var prop in parentProps) {
             var parentProp = '_parent_' + prop;
-            var val = this._templatized[parentProp];
             var effects = [{
               kind: 'function',
               effect: { function: function(prop, source, value) {
                 this._forwardParentProp(prop, value);
               }.bind(this, prop)}
             }];
-            Polymer.Bind._createAccessors(this._templatized,
-              parentProp, effects);
-            this._templatized._propertySet(parentProp, val);
+            Polymer.Bind._createAccessors(proto, parentProp, effects);
           }
         }
+
+        // Instance setup
+        if (this._templatized != this) {
+          Polymer.Bind.prepareInstance(this._templatized);
+        }
+        this._extendTemplate(this._templatized, proto);
+
       }
     },
 
+    // Similar to Polymer.Base.extend, but retains any previously set instance
+    // values (_propertySet back on instance once accessor is installed)
+    _extendTemplate: function(template, proto) {
+      Object.getOwnPropertyNames(proto).forEach(function(n) {
+        var val = template[n];
+        var pd = Object.getOwnPropertyDescriptor(proto, n);
+        Object.defineProperty(template, n, pd);
+        if (val !== undefined) {
+          template._propertySet(n, val);
+        }
+      });
+    },
+
     _notifyPathImpl: function(path, value) {
       var p = path.match(/([^.]*)\.(([^.]*).*)/);
                           // 'root.sub.path'

From 364fcecb9359df6538e0b31a5b3b918c77aab49b Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 10 Apr 2015 14:32:37 -0700
Subject: [PATCH 12/13] Doc _discoverTemplateParentProps

---
 src/lib/annotations/annotations.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index 913d4432f0..344b7034dd 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -181,9 +181,17 @@
       }
     },
 
+    // Finds all parent.* properties in template content and stores
+    // the path members in content._parentPropChain, which is an array
+    // of maps listing the properties of parent templates required at
+    // each level. Each outer template merges inner _parentPropChains to
+    // propagate inner parent property needs to outer templates.
+    // The top-level parent props from the chain (corresponding to this 
+    // template) are stored in content._parentProps.
     _discoverTemplateParentProps: function(content) {
       var chain = content._parentPropChain = [];
       content._annotes.forEach(function(n) {
+        // Find all bindings to parent.* and spread them into _parentPropChain
         n.bindings.forEach(function(b) {
           var m;
           if (m = b.value.match(/parent\.((parent\.)*[^.]*)/)) {
@@ -194,6 +202,7 @@
             }
           }
         });
+        // Merge child _parentPropChain[n+1] into this _parentPropChain[n]
         if (n.templateContent) {
           var tpp = n.templateContent._parentPropChain;
           for (var i=1; i<tpp.length; i++) {
@@ -204,6 +213,7 @@
           }
         }
       });
+      // Store this template's parentProps map
       content._parentProps = chain[0];
     },
 

From 8b114fea394b3cc43a21f544fde421f16cea28d5 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 10 Apr 2015 16:27:16 -0700
Subject: [PATCH 13/13] Minor changes from review.

---
 src/lib/template/templatizer.html | 5 ++---
 src/lib/template/x-if.html        | 8 ++++----
 src/lib/template/x-repeat.html    | 4 ++--
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index 698ef36395..60245c6f8e 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -101,7 +101,6 @@
     _prepParentProperties: function(archetype) {
       var parentProps = this._parentProps = archetype._parentProps;
       if (this._forwardParentProp && parentProps) {
-
         // Prototype setup (memoized on archetype)
         var proto = archetype._parentPropProto;
         if (!proto) {
@@ -126,13 +125,11 @@
             Polymer.Bind._createAccessors(proto, parentProp, effects);
           }
         }
-
         // Instance setup
         if (this._templatized != this) {
           Polymer.Bind.prepareInstance(this._templatized);
         }
         this._extendTemplate(this._templatized, proto);
-
       }
     },
 
@@ -195,6 +192,8 @@
     stamp: function(model) {
       model = model || {};
       if (this._parentProps) {
+        // TODO(kschaaf): Maybe this is okay
+        // model.parent = this.dataHost;
         model.parent = model.parent || {};
         for (var prop in this._parentProps) {
           model.parent[prop] = this['_parent_' + prop];
diff --git a/src/lib/template/x-if.html b/src/lib/template/x-if.html
index d4c1bdd610..60671d43a1 100644
--- a/src/lib/template/x-if.html
+++ b/src/lib/template/x-if.html
@@ -53,11 +53,11 @@
 
     render: function() {
       this.debounce('render', function() {
-        if (!this.ctor) {
-          this._wrapTextNodes(this._content);
-          this.templatize(this);
-        }
         if (this.if) {
+          if (!this.ctor) {
+            this._wrapTextNodes(this._content);
+            this.templatize(this);
+          }
           this._ensureInstance();
         } else if (this.restamp) {
           this._teardownInstance();
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index b5b023a25b..74e968f8bd 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -195,7 +195,7 @@
 
     _itemsChanged: function(items, old, path) {
       if (path) {
-        this._notifyItemChanged(path, items);
+        this._forwardItemPath(path, items);
         this._checkObservedPaths(path);
       } else {
         if (old) {
@@ -496,7 +496,7 @@
 
     // Called as a side effect of a host items.<key>.<path> path change,
     // responsible for notifying item.<path> changes to row for key
-    _notifyItemChanged: function(path, value) {
+    _forwardItemPath: function(path, value) {
       if (this._rowForKey) {
         // 'items.'.length == 6
         var dot = path.indexOf('.', 6);