在 Table 标签中使用模板转发器

Question

在我的应用程序中，我注意到我的模板转发器在 table 内部时不会被调用。我的目标是使用中继器补全数据，按需刷新。

标记：

<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>

飞镖：

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

class MyPolymerElement 扩展了 PolymerElement{ @属性列表 themeList = []; MyPolymerElement.created() : super.created(); 随附的（）{} }

Answer 1

在查看 Polymer 的设计方法时，它是 HTML 的现代版本，再加上 Dart（最初被标记为网络编程的未来）。我不得不做一些样品测试。将其提取到自己的位置后，在 table 之外，我确实确认数据确实重复了。问题来自 table.

A table 是列出数据的旧方法。它是互联网上最古老但最常用的概念之一。随着这个新的计算时代和 Polymer 设计方法的利用，我们实际上根本不应该使用它们。

从概念上讲，有更现代、更有趣的方式向用户展示信息。最常见的概念之一是整个 Polymer、Cards 中的概念。您可以通过 css 和 html 定义一张卡片并重复该操作，围绕聚合物网站创建如此多的列表。

这个问题我想了很久。似乎将模板转发器放在 table 和 table>tbody 对内不会执行渲染，而是按原样渲染。 header 概念下方的 1 行空字符串。

因此，要获得明确问题的正确答案，您可以这样做。

<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>

这将使您的转发器正常工作，同时利用 "table" 而无需使用 table 标签。

虽然在更深层次的理解上，我认为应该研究用于显示数据行的更现代的概念。开发符合现代概念的卡片或结构将使您能够有效地利用您尝试使用的现代工具。

Answer 2

这不一定是 Polymer 或您的代码中的 "broken"，而是由浏览器解析器中的 "feature" 引起的限制。由于 table 的元素层次结构定义明确，浏览器在处理它们时具有特定的解析规则。钻取 table 层次结构时，如果解析器遇到它不期望的子级，则会产生意外结果。

很难从摘录中看出，但我猜你的转发器确实在工作，但浏览器没有呈现 table 中的行。如果您想 post 问题的完整演示，我很乐意查看并修改我的答案。

一种解决方法是在您的 themeList 属性上放置一个观察者。当值改变时，使用DOM操作填充或修改table.

在与此问题相关的讨论中有一些很好的信息：https://github.com/Polymer/polymer/issues/4135

根据帖子，Polymer 2.0 预览版中似乎有一个允许这样做的修复程序。

在 Table 标签中使用模板转发器

Using a Template Repeater in a Table tag

polymer

dart-polymer

polymer-1.0