Templatize templates in separate templatizer elements

This makes sure each template is only templatized once and that no element
never templatized more than one template.

Also, patches a memory leak which happened due to not removing template
instances from templateInstances array when cells get removed during column
tree update.

demo/columns.html

@@ -12,6 +12,7 @@
 
   <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
   <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../../iron-image/iron-image.html">
   <link rel="import" href="../../paper-menu/paper-menu.html">
   <link rel="import" href="../../paper-item/paper-item.html">
@@ -188,6 +189,43 @@ <h3>Resizing Columns</h3>
       </template>
       <x-grid></x-grid>
     </demo-snippet>
+
+    <demo-snippet>
+      <h3>Dynamic Columns using dom-repeat</h3>
+      <template>
+        <x-dynamic-columns></x-dynamic-columns>
+        <dom-module id="x-dynamic-columns">
+          <template>
+            <x-data-source data-source="{{dataSource}}"></x-data-source>
+            <vaadin-grid id="grid" data-source="[[dataSource]]" size="200">
+              <template is="dom-repeat" items="[[columns]]" as="column">
+                <vaadin-grid-column>
+                  <template class="header">[[column]]</template>
+                  <template>[[_itemProperty(item, column)]]</template>
+                </vaadin-grid-column>
+              </template>
+            </vaadin-grid>
+          </template>
+          <script>
+            Polymer({
+              is: 'x-dynamic-columns',
+
+              properties: {
+                columns: Array
+              },
+
+              ready: function() {
+                this.columns = ['name.first', 'name.last', 'email'];
+              },
+
+              _itemProperty: function(item, column) {
+                return this.get('user.' + column, item);
+              }
+            });
+          </script>
+        </dom-module>
+      </template>
+    </demo-snippet>
   </div>
 </body>
 

test/column-groups.html

@@ -187,8 +187,7 @@
           expect(cells).not.to.be.empty;
 
           cells.forEach(function(cell) {
-            var el = getCellContent(cell);
-            expect(el.matches(':empty')).to.be.true;
+            expect(cell._isEmpty).to.be.true;
           });
         });
 
@@ -204,8 +203,7 @@
           expect(cells).not.to.be.empty;
 
           cells.forEach(function(cell) {
-            var el = getCellContent(cell);
-            expect(el.matches(':empty')).to.be.true;
+            expect(cell._isEmpty).to.be.true;
           });
         });
 

vaadin-grid-column.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="vaadin-grid-templatizer.html">
 
 <dom-module id="vaadin-grid-column">
 </dom-module>
@@ -71,10 +72,22 @@
     },
 
     _headerTemplateChanged: function(headerTemplate) {
+      if (headerTemplate) {
+        var templatizer = new vaadin.elements.grid.Templatizer(this.dataHost);
+        templatizer._instanceProps = {};
+        templatizer.template = headerTemplate;
+      }
+
       this.fire('property-changed', {path: 'headerTemplate', value: headerTemplate});
     },
 
     _footerTemplateChanged: function(footerTemplate) {
+      if (footerTemplate) {
+        var templatizer = new vaadin.elements.grid.Templatizer(this.dataHost);
+        templatizer._instanceProps = {};
+        templatizer.template = footerTemplate;
+      }
+
       this.fire('property-changed', {path: 'footerTemplate', value: footerTemplate});
     },
 
@@ -125,6 +138,14 @@
     },
 
     _templateChanged: function(template) {
+      var templatizer = new vaadin.elements.grid.Templatizer(this.dataHost);
+
+      // body cell templatizer needs to be attached so that `item-changed` and
+      // `template-instance-changed` events propagate to grid.
+      Polymer.dom(this.root).appendChild(templatizer);
+
+      templatizer.template = template;
+
       // We bubble false for optimisation
       this.fire('property-changed', {path: 'template', value: template}, {bubbles: false});
     },

vaadin-grid-data-source-behavior.html

@@ -65,6 +65,10 @@
    */
   vaadin.elements.grid.DataSourceBehavior = {
 
+    listeners: {
+      'item-changed': '_templateItemChanged'
+    },
+
     properties: {
 
       /**
@@ -103,6 +107,25 @@
       },
     },
 
+    _templateItemChanged: function(e) {
+      var item = e.detail.item;
+
+      // TODO: We could avoid iterating rows by fixing _physicalIndexForKey mapping
+      // in iron-list-behavior so that vidx could be used to fetch the correct row element.
+      Polymer.dom(this.$.scroller.$.items).children.forEach(function(row) {
+        if (row.item === item) {
+          row.iterateCells(function(cell) {
+            // replacing the whole item instead of updating just the updated path
+            // to prevent _forwardInstancePath from firing duplicate `item-changed`
+            // events on all the sibling cells.
+            // main goal is just to get the [[item.xxx]] bindings up-to-date.
+            cell.instance.item = null;
+            cell.instance.item = item;
+          });
+        }
+      });
+    },
+
     _getCachedItem: function(index) {
       var page = this._getPageForIndex(index);
 

vaadin-grid-row-details-behavior.html

@@ -1,3 +1,5 @@
+<link rel="import" href="vaadin-grid-templatizer.html">
+
 <dom-module id="vaadin-grid-row-details-styles">
   <template>
     <style>
@@ -39,7 +41,8 @@
     },
 
     observers: [
-      '_expandedItemsChanged(expandedItems.*, dataSource)'
+      '_expandedItemsChanged(expandedItems.*, dataSource)',
+      '_rowDetailsTemplateChanged(rowDetailsTemplate)'
     ],
 
     _expandedItemsChanged: function(expandedItems, dataSource) {
@@ -49,6 +52,21 @@
       }.bind(this));
     },
 
+    _rowDetailsTemplateChanged: function(rowDetailsTemplate) {
+      var templatizer = new vaadin.elements.grid.Templatizer(this.dataHost);
+      templatizer._instanceProps = {
+        expanded: true,
+        item: true,
+        selected: true
+      };
+
+      // row details templatizer needs to be attached so that `item-changed` and
+      // `template-instance-changed` events propagate to grid.
+      Polymer.dom(this.root).appendChild(templatizer);
+
+      templatizer.template = rowDetailsTemplate;
+    },
+
     _isExpanded: function(item) {
       return this.expandedItems && this.expandedItems.indexOf(item) !== -1;
     },