Question

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

标记：

<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 extends PolymerElement { @property List themeList = []; MyPolymerElement.created（）：super.created（）; 附（）{} }

Answer 1

这不一定是Polymer或您的代码中“破坏”的东西，而是由浏览器解析器中的“功能”引起的限制。由于table的元素层次结构定义良好，因此浏览器在处理它们时会有特定的解析规则。在钻入table层次结构时，如果解析器遇到了它不期望的子节点，则会产生意外结果。

从摘录中很难说，但我猜你的转发器实际上正在工作，但是浏览器没有渲染表中的行。如果您想发布问题的完整演示，我很乐意审核并修改我的答案。

解决这个问题的方法是将观察者放在themeList属性上。当值更改时，使用DOM操作来填充或修改表。

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

根据该主题，似乎有一个修复程序允许在Polymer 2.0预览版本中使用它。

Answer 2

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

表是列出数据的旧方法。它是互联网上最古老但最常用的概念之一。随着这个新的计算时代和聚合物设计方法的利用，我们实际上根本不会想要使用它们。

从概念上讲，有更多现代和有趣的方式向用户显示信息。最常见的概念之一是整个Polymer，Cards的想法。你可以通过css和html定义一张卡片并重复一遍，在聚合物网站周围创建了很多列表。

我对此深思熟虑。似乎将模板转发器放在一个表和一个表＆gt; tbody对中不会执行渲染，而是只是按原样渲染它。标题概念下面有一行空字符串。

所以为了得到你明确问题的正确答案，你可以做这样的事情。

<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标记中使用Template Repeater

2 个答案: