Using a Template Repeater in a Table tag

In my application I have noticed that my template repeater does not get called when inside of a table. My goal is to use the repeater to complete the data and refresh it as needed.

Markup:

<table>
    <tr>
        <th>Name</th>
        <th>Date Uploaded</th>
        <th>Default</th>
    </tr>
    <template id="themesRows" is="dom-repeat" items="{{themeList}}">
        <tr>
            <td>TEST {{item.name}}</td>
            <td>{{item.dateCreatedUtc}}</td>
            <td>
                <!--<input type="radio" name="default" value="{{item.id}}" selected="{{item.id == model.defaultThemeId}}" />-->
            </td>
            <td>{{index}}</td>
        </tr>
    </template>
</table>

Dart:

class SampleB {
  String name = "";
  String dateCreatedUtc = "";
  int id = 0;
  SampleB(this.id, this.name, this.dateCreatedUtc);
}

class MyPolymerElement extends PolymerElement{ @property List themeList = []; MyPolymerElement.created() : super.created(); attached(){} }

Solution

This is not necessarily something "broken" in Polymer or your code, rather it is a limitation caused by a "feature" in the browser parser. Since the element hierarchy for table is well defined, browsers have specific parsing rules when they process them. When drilling into a table hierarchy, if the parser comes across a child it does not expect, it produces unexpected results.

It's hard to tell from the excerpt, but I would guess that your repeater is actually working, but the browser is not rendering the rows within the table. If you want to post a complete demo of the issue, I'd be happy to review and amend my answer.

A way around this is to just put an observer on your themeList property. When the value changes, use DOM manipulation to fill or modify the table.

There is some good information about it in the discussion related to this issue: https://github.com/Polymer/polymer/issues/4135

Per the thread, it appears there is a fix that will allow this in the Polymer 2.0 preview release.