Polymer 在表标记中使用模板转发器

在我的应用程序中，我注意到我的模板转发器在表中时不会被调用。我的目标是使用中继器来完成数据并根据需要刷新它

标记：

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

类MyPolymRelation扩展了PolymRelation{ @属性列表themeList=[]； mypolymerement.created（）：super.created（）； 附加（）{}

---

}

当我们研究Polymer的设计方法时，它是HTML的现代版本，加上Dart（最初被标记为web编程的未来）。我必须做一些样品测试。在将数据提取到它自己的位置之后，在表的位置之外，我确认数据确实重复了。这个问题来自谈判桌

表格是列出数据的一种老方法。它是互联网上最古老但最常用的概念之一。在这个新的计算时代和聚合物设计方法的杠杆作用下，我们根本不打算使用它们

从概念上讲，有更现代、更有趣的方式向用户显示信息。最常见的概念之一是贯穿聚合物、卡片的理念。你可以通过css和html定义一张卡片，然后重复这一点，在网站上创建很多列表

对此我想了很久。似乎在一个表和一个table>tbody对的内部放置一个模板转发器不会执行渲染，而只是按原样渲染。标题概念下有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{display:table；}
.row{显示：表行；}
.header{font-weight:粗体；display:表格单元格；text-align:居中；}
.cell{display:表格单元格；}
名称
创建日期
违约
{{item.name}
{{item.dateCreatedUtc}

这将使中继器工作，同时利用“表”而不使用

table

标记

---

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

当我们研究聚合物的设计方法时，聚合物是HTML的现代版本，加上Dart（最初被标记为web编程的未来）。我必须做一些样品测试。在将数据提取到它自己的位置之后，在表的位置之外，我确认数据确实重复了。这个问题来自谈判桌

表格是列出数据的一种老方法。它是互联网上最古老但最常用的概念之一。在这个新的计算时代和聚合物设计方法的杠杆作用下，我们根本不打算使用它们

从概念上讲，有更现代、更有趣的方式向用户显示信息。最常见的概念之一是贯穿聚合物、卡片的理念。你可以通过css和html定义一张卡片，然后重复这一点，在网站上创建很多列表

对此我想了很久。似乎在一个表和一个table>tbody对的内部放置一个模板转发器不会执行渲染，而只是按原样渲染。标题概念下有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{display:table；}
.row{显示：表行；}
.header{font-weight:粗体；display:表格单元格；text-align:居中；}
.cell{display:表格单元格；}
名称
创建日期
违约
{{item.name}
{{item.dateCreatedUtc}

这将使中继器工作，同时利用“表”而不使用

table

标记

---

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

这不一定是您的代码或聚合物中的“破损”，而是浏览器解析器中的“功能”造成的限制。由于

表

的元素层次结构定义良好，浏览器在处理它们时有特定的解析规则。当钻取

表

层次结构时，如果解析器遇到它不期望的子级，则会产生意外的结果

很难从摘录中分辨出来，但我猜您的中继器实际上正在工作，但浏览器没有呈现表中的行。如果你想发布这个问题的完整演示，我很乐意回顾和修改我的答案

解决这个问题的一种方法是在

themeList

属性上放置一个观察者。当值更改时，使用DOM操作填充或修改表

---

在与此问题相关的讨论中，有一些很好的信息：

---

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

这不一定是Polymer或您的代码中“损坏”的东西，而是浏览器解析器中的“功能”造成的限制。由于

表

的元素层次结构定义良好，浏览器在处理它们时有特定的解析规则。当钻取

表

层次结构时，如果解析器遇到它不期望的子级，则会产生意外的结果

很难从摘录中看出，bu