Merge pull request #1514 from Polymer/0.8-nested-template-args

Process nested templates in base, parse method args for parentProps.

Author: Steve Orvell

src/lib/annotations/annotations.html

@@ -161,11 +161,7 @@
 
     // 1. Parse annotations from the template and memoize them on
     //    content._notes (recurses into nested templates)
-    // 2. Parse template bindings for parent.* properties and memoize them on
-    //    content._parentProps
-    // 3. Create bindings in current scope's annotation list to template for
-    //    parent props found in template
-    // 4. Remove template.content and store it in annotation list, where it
+    // 2. Remove template.content and store it in annotation list, where it
     //    will be the responsibility of the host to set it back to the template
     //    (this is both an optimization to avoid re-stamping nested template
     //    children and avoids a bug in Chrome where nested template children
@@ -176,56 +172,18 @@
       var content = document.createDocumentFragment();
       content._notes = 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 bindings = [];
-      this._discoverTemplateParentProps(content);
-      for (var prop in content._parentProps) {
-        bindings.push({
-          index: index,
-          kind: 'property',
-          mode: '{',
-          name: '_parent_' + prop,
-          value: prop
-        });
-      }
       // TODO(sjmiles): using `nar` to avoid unnecessary allocation;
       // in general the handling of these arrays needs some cleanup
       // in this module
       list.push({
-        bindings: bindings,
+        bindings: Polymer.nar,
         events: Polymer.nar,
         templateContent: content,
         parent: parent,
         index: index
       });
     },
 
-    // Finds all bindings in template content and stores the path roots in
-    // the path members in content._parentProps. Each outer template merges
-    // inner _parentProps to propagate inner parent property needs to outer
-    // templates.
-    _discoverTemplateParentProps: function(content) {
-      var pp = content._parentProps = {};
-      content._notes.forEach(function(n) {
-        // Find all bindings to parent.* and spread them into _parentPropChain
-        n.bindings.forEach(function(b) {
-          var prop = b.value;
-          var dot = prop.indexOf('.');
-          prop = (dot < 0) ? prop : prop.slice(0, dot);
-          pp[prop] = true;
-        });
-        // Merge child _parentProps into this _parentProps
-        if (n.templateContent) {
-          var tpp = n.templateContent._parentProps;
-          Polymer.Base.mixin(pp, tpp);
-        }
-      });
-    },
-
     // 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

src/lib/template/templatizer.html

@@ -124,28 +124,20 @@
     },
 
     _customPrepAnnotations: function(archetype, template) {
-      if (template) {
-        archetype._template = template;
-        var c = template._content;
-        if (c) {
-          var rootDataHost = archetype._rootDataHost;
-          if (rootDataHost) {
-            Polymer.Annotations.prepElement =
-              rootDataHost._prepElement.bind(rootDataHost);
-          }
-          archetype._notes = c._notes ||
-            Polymer.Annotations.parseAnnotations(template);
-          c._notes = archetype._notes;
-          Polymer.Annotations.prepElement = null;
-          archetype._parentProps = c._parentProps;
-        }
-        else {
-          console.warn('no _content');
+      archetype._template = template;
+      var c = template._content;
+      if (!c._notes) {
+        var rootDataHost = archetype._rootDataHost;
+        if (rootDataHost) {
+          Polymer.Annotations.prepElement =
+            rootDataHost._prepElement.bind(rootDataHost);
         }
+        c._notes = Polymer.Annotations.parseAnnotations(template);
+        Polymer.Annotations.prepElement = null;
+        this._processAnnotations(c._notes);
       }
-      else {
-        console.warn('no _template');
-      }
+      archetype._notes = c._notes;
+      archetype._parentProps = c._parentProps;
     },
 
     // Sets up accessors on the template to call abstract _forwardParentProp

src/standard/annotations.html

@@ -124,10 +124,70 @@
         // TODO(sorvell): ad hoc method of plugging behavior into Annotations
         Polymer.Annotations.prepElement = this._prepElement.bind(this);
         this._notes = Polymer.Annotations.parseAnnotations(this._template);
+        this._processAnnotations(this._notes);
         Polymer.Annotations.prepElement = null;
       }
     },
 
+    _processAnnotations: function(notes) {
+      for (var i=0; i<notes.length; i++) {
+        var note = notes[i];
+        // Parse bindings for methods & path roots (models)
+        for (var j=0; j<note.bindings.length; j++) {
+          var b = note.bindings[j];
+          b.signature = this._parseMethod(b.value);
+          if (!b.signature) {
+            b.model = this._modelForPath(b.value);
+          }
+        }
+        // Recurse into nested templates & bind parent props
+        if (note.templateContent) {
+          this._processAnnotations(note.templateContent._notes);
+          var pp = note.templateContent._parentProps =
+            this._discoverTemplateParentProps(note.templateContent._notes);
+          var bindings = [];
+          for (var prop in pp) {
+            bindings.push({
+              index: note.index,
+              kind: 'property',
+              mode: '{',
+              name: '_parent_' + prop,
+              model: prop,
+              value: prop
+            });
+          }
+          note.bindings = note.bindings.concat(bindings);
+        }
+      }
+    },
+
+    // Finds all bindings in template content and stores the path roots in
+    // the path members in content._parentProps. Each outer template merges
+    // inner _parentProps to propagate inner parent property needs to outer
+    // templates.
+    _discoverTemplateParentProps: function(notes) {
+      var pp = {};
+      notes.forEach(function(n) {
+        // Find all bindings to parent.* and spread them into _parentPropChain
+        n.bindings.forEach(function(b) {
+          if (b.signature) {
+            var args = b.signature.args;
+            for (var k=0; k<args.length; k++) {
+              pp[args[k].model] = true;
+            }
+          } else {
+            pp[b.model] = true;
+          }
+        });
+        // Merge child _parentProps into this _parentProps
+        if (n.templateContent) {
+          var tpp = n.templateContent._parentProps;
+          Polymer.Base.mixin(pp, tpp);
+        }
+      });
+      return pp;
+    },
+
     _prepElement: function(element) {
       Polymer.ResolveUrl.resolveAttrs(element, this._template.ownerDocument);
     },

src/standard/effects.html

@@ -33,10 +33,7 @@
   Polymer.Base._addFeature({
 
     _addPropertyEffect: function(property, kind, effect) {
-     // TODO(sjmiles): everything to the right of the first '.' is lost, implies
-     // there is some duplicate information flow (not the only sign)
-     var model = property.split('.').shift();
-     Polymer.Bind.addPropertyEffect(this, model, kind, effect);
+     Polymer.Bind.addPropertyEffect(this, property, kind, effect);
     },
 
     // prototyping
@@ -79,13 +76,16 @@
       if (m) {
         return {
           method: m[1],
-          args: m[2].split(/[^\w.*]+/).map(this._parseArg)
+          args: m[2].split(/[^\w.*]+/).map(this._parseArg, this)
         };
       }
     },
 
     _parseArg: function(arg) {
-      var a = { name: arg };
+      var a = {
+        name: arg,
+        model: this._modelForPath(arg)
+      };
       a.structured = arg.indexOf('.') > 0;
       if (a.structured) {
         a.wildcard = (arg.slice(-2) == '.*');
@@ -99,7 +99,7 @@
     _addComputedEffect: function(name, expression) {
       var sig = this._parseMethod(expression);
       sig.args.forEach(function(arg) {
-        this._addPropertyEffect(arg.name, 'compute', {
+        this._addPropertyEffect(arg.model, 'compute', {
           method: sig.method,
           args: sig.args,
           arg: arg,
@@ -126,7 +126,7 @@
     _addComplexObserverEffect: function(observer) {
       var sig = this._parseMethod(observer);
       sig.args.forEach(function(arg) {
-        this._addPropertyEffect(arg.name, 'complexObserver', {
+        this._addPropertyEffect(arg.model, 'complexObserver', {
           method: sig.method,
           args: sig.args,
           arg: arg
@@ -154,22 +154,20 @@
         Polymer.Bind._addAnnotatedListener(this, index,
           note.name, note.value, note.event);
       }
-      var sig = this._parseMethod(note.value);
-      if (sig) {
-        this._addAnnotatedComputationEffect(sig, note, index);
+      if (note.signature) {
+        this._addAnnotatedComputationEffect(note, index);
       } else {
         // capture the node index
         note.index = index;
-        // discover top-level property (model) from path
-        var model = note.value.split('.').shift();
         // add 'annotation' binding effect for property 'model'
-        this._addPropertyEffect(model, 'annotation', note);
+        this._addPropertyEffect(note.model, 'annotation', note);
       }
     },
 
-    _addAnnotatedComputationEffect: function(sig, note, index) {
+    _addAnnotatedComputationEffect: function(note, index) {
+      var sig = note.signature;
       sig.args.forEach(function(arg) {
-        this._addPropertyEffect(arg.name, 'annotatedComputation', {
+        this._addPropertyEffect(arg.model, 'annotatedComputation', {
           kind: note.kind,
           method: sig.method,
           args: sig.args,

src/standard/notify-path.html

@@ -271,7 +271,8 @@
       },
 
       _modelForPath: function(path) {
-        return path.split('.').shift();
+        var dot = path.indexOf('.');
+        return (dot < 0) ? path : path.slice(0, dot);
       },
 
       _EVENT_CHANGED: '-changed',

test/smoke/dom-repeat.html

@@ -91,6 +91,7 @@
         <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>
+        <x-labeled-input label="outerObjD.value" value="{{outerObjD.value}}"></x-labeled-input>
       </div>
 
       <div class="layout horizontal flex">
@@ -104,7 +105,7 @@
               <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
               <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
               <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
-              <x-labeled-input label="computeConcat(itemA.name, outerObjA.value)" value="{{computeConcat(itemA.name, outerObjA.value)}}" disabled></x-labeled-input>
+              <x-labeled-input label="computeConcat(itemA.name, outerObjD.value)" value="{{computeConcat(itemA.name, outerObjD.value)}}" disabled></x-labeled-input>
               <template is="dom-repeat" id="xr1-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
                 <div class="item" id="xr1-2" idx$="{{index}}">
                   <div class="index">idx: <span>{{index}}</span></div>
@@ -143,7 +144,7 @@
               <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
               <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
               <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
-              <x-labeled-input label="computeConcat(itemA.name, outerObjA.value)" value="{{computeConcat(itemA.name, outerObjA.value)}}" disabled></x-labeled-input>
+              <x-labeled-input label="computeConcat(itemA.name, outerObjD.value)" value="{{computeConcat(itemA.name, outerObjD.value)}}" disabled></x-labeled-input>
               <template is="dom-repeat" id="xr2-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
                 <div class="item" id="xr2-2" idx$="{{index}}">
                   <div class="index">idx: <span>{{index}}</span></div>
@@ -297,6 +298,9 @@
         },
         outerObjC: {
           value: function() { return { value: 'outerObjC.value' }; }
+        },
+        outerObjD: {
+          value: function() { return { value: 'outerObjD.value' }; }
         }
       },
       changeOuterA: function() {

test/unit/dom-repeat-elements.html

@@ -114,7 +114,10 @@
            innerb-prop="{{innerbProp}}"
            itemb-prop="{{itembProp}}"
            innerc-prop="{{innercProp}}"
-           itemc-prop="{{itemcProp}}">
+           itemc-prop="{{itemcProp}}"
+           computed1="{{computed1}}"
+           computed2="{{computed2}}"
+           computed3="{{computed3}}">
     </x-bar>
   </template>
 </dom-module>
@@ -267,7 +270,8 @@
              itema-prop="{{itema.prop}}"
              outer-prop="{{prop}}"
              outer-item-prop="{{item.prop}}"
-             indexa="{{indexa}}">
+             indexa="{{indexa}}"
+             computeda="{{concat(itema.prop, itemForComputedA.prop)}}">
       </x-foo>
       <template is="dom-repeat" items="{{itema.items}}" as="itemb" index-as="indexb">
         <x-foo
@@ -278,7 +282,8 @@
                outer-prop="{{prop}}"
                outer-item-prop="{{item.prop}}"
                indexa="{{indexa}}"
-               indexb="{{indexb}}">
+               indexb="{{indexb}}"
+               computedb="{{concat(itemb.prop, itemForComputedB.prop)}}">
         </x-foo>
         <template is="dom-repeat" items="{{itemb.items}}" as="itemc" index-as="indexc">
           <x-foo
@@ -292,7 +297,8 @@
                  outer-item-prop="{{item.prop}}"
                  indexa="{{indexa}}"
                  indexb="{{indexb}}"
-                 indexc="{{indexc}}">
+                 indexc="{{indexc}}"
+                 computedc="{{concat(itemc.prop, itemForComputedC.prop)}}">
           </x-foo>
         </template>
       </template>
@@ -312,6 +318,15 @@
       item: {
         value: function() { return {prop: 'outerItem'}; }
       },
+      itemForComputedA: {
+        value: function() { return {prop: 'itemForComputedA'}; }
+      },
+      itemForComputedB: {
+        value: function() { return {prop: 'itemForComputedB'}; }
+      },
+      itemForComputedC: {
+        value: function() { return {prop: 'itemForComputedC'}; }
+      },
       _testHost: {
         value: function() { return this; }
       }
@@ -323,6 +338,9 @@
     filter2nd: function(o) {
       assert.equal(this, this._testHost);
       return o.prop.indexOf('2') < 0;
+    },
+    concat: function(a, b) {
+      return a + '+' + b;
     }
   });
 </script>

test/unit/dom-repeat.html

@@ -87,13 +87,16 @@ <h4>inDocumentRepeater</h4>
         var stamped = Polymer.dom(configured.root).querySelectorAll('*:not(template)');
         assert.equal(stamped.length, 3 + 3*3 + 3*3*3, 'total stamped count incorrect');
         assert.equal(stamped[0].itemaProp, 'prop-1');
+        assert.equal(stamped[0].computeda, 'prop-1+itemForComputedA');
         assert.equal(stamped[0].indexa, 0);
         assert.equal(stamped[0].$.bar.itemaProp, 'prop-1');
         assert.equal(stamped[1].itembProp, 'prop-1-1');
+        assert.equal(stamped[1].computedb, 'prop-1-1+itemForComputedB');
         assert.equal(stamped[1].indexa, 0);
         assert.equal(stamped[1].indexb, 0);
         assert.equal(stamped[1].$.bar.itembProp, 'prop-1-1');
         assert.equal(stamped[2].itemcProp, 'prop-1-1-1');
+        assert.equal(stamped[2].computedc, 'prop-1-1-1+itemForComputedC');
         assert.equal(stamped[2].indexa, 0);
         assert.equal(stamped[2].indexb, 0);
         assert.equal(stamped[2].indexc, 0);