在表格标签中使用模板中继器

Question

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(){} }

Answer 1

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.

Answer 2

When looking at design methodologies of Polymer being a modern version of HTML, coupled with Dart (originally tagged as the future of web programming). I had to do some sample tests. After extracting it to its own spot, outside that of the table I did confirm that the data does in fact, repeat. The issue comes from the table.

A table is an old way of listing out data. It is the oldest but one of the most used concepts on the internet. With this new age of computing and the leveraging of Design methodologies of Polymer we aren't actually suppose to use them at all.

Conceptually, there are more modern and entertaining ways to display information to users. One of the most commonplace concepts is the idea all throughout Polymer, Cards. You would define a card through css and html and repeat that, creating so many of the lists around the polymer websites.

I thought long and hard about this. It seems that putting a template repeater inside of a table and a table>tbody pair would not carry out the render, instead it just rendered it as is. 1 row of empty strings underneath the header concepts.

So to get the correct answer to your explicit question, you could do something like this.

<dom-module id="tableDesign">
  <template>
    <style>
      .table { display: table;}
      .row { display: table-row;}
      .header { font-weight:bold; display: table-cell; text-align:center;}
      .cell { display: table-cell;}
    </style>

    <div class="table">
      <div class="row">
        <div class="header">Name</div>
        <div class="header">Date Created</div>
        <div class="header">Default</div>
      </div>
      <template is="dom-repeat" items="{{themeList}}">
        <div class="row">
          <div class="cell">{{item.name}}</div>
          <div class="cell">{{item.dateCreatedUtc}}</div>
          <div class="cell">
            <!-- Insert Radio Here -->
          </div>
        </div>
      </template>
    </div>
  </template>
</dom-module>

This will get your repeater to work, while leveraging a "table" without using the table tag.

On a deeper level of understanding though, I think that looking at a more modern concept for displaying your rows of data should be looked into. Developing a card or structure which fits with the modern concepts would allow you to effectively lever the modern tools you are trying to use.