I have a table component and trying to use different template for every cell in one row.
Trying to do something like:
+ <table-dd>
+ <div name="col1">
+ <template id="ololo1">
+ 123
+ </template>
+ </div>
+ <div name="col2">
+ <template id="ololo2">
+ 789
+ </template>
+ </div>
+ </table-dd>
And here is component code..
+ <polymer-element name="table-dd">
+ <template>
+ Table Header
+ <template ref="{{extTemplate}}">
+ </template>
+ <script>
+ Polymer({
+ domReady: function(){
+ var template = this.querySelector('template');
+ this.shadowRoot.appendChild(template);
+ }
+ });
The reason for this - I try to use other solution but get terrible performance:
+ <polymer-element name="table-dd">
+ <template>
+ .....
+ <td template repeat="{{column in columns}}">
+ <ideel-table-row template="{{column.template}}" item="{{item}}" context="{{column.context}}">
+ </ideel-table-row>
+ </td>
+ </template>
+ .....
+ </polymer-element>
+ <polymer-element name="table-row" attributes="template item context">
+ <script>
+ Polymer({
+ attached: function(){
+ if (this.children.length == 0) {
+ this.appendChild(this.template.createInstance(_.merge({item: this.item, context: this.context}, this.context)))
+ }
+ }
+ })
+ </script>
+ </polymer-element>