在表格標簽中使用模板中繼器

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);
}

類MyPolymerElement擴展PolymerElement {@property List themeList = []; MyPolymerElement.created（）：super.created（）; Attached（）{}}

Answer 1

這不一定是Polymer或代碼中的“損壞”，而是由瀏覽器解析器中的“功能”引起的限制。 由於table的元素層次結構定義明確，因此瀏覽器在處理它們時具有特定的解析規則。 深入table層次結構時，如果解析器遇到了它不期望的子級，則會產生意外的結果。

從摘錄中很難分辨出來，但我想您的中繼器實際上正在工作，但是瀏覽器未在表中呈現行。 如果您想發布該問題的完整演示，我們很樂意查看並修改答案。

一種解決方法是將觀察者放在您的themeList屬性上。 當值更改時，請使用DOM操作來填充或修改表。

---

在與此問題相關的討論中，有一些很好的信息： https : //github.com/Polymer/polymer/issues/4135

對於每個線程，似乎都存在一個修復程序，該修復程序將在Polymer 2.0預覽版本中允許此操作。

Answer 2

在查看Polymer的設計方法時，它是HTML的現代版本，並與Dart結合使用（最初標記為Web編程的未來）。 我必須做一些樣本測試。 將其提取到自己的位置之后，在表格之外，我確實確認數據確實重復了。 問題出在表上。

表是列出數據的一種舊方法。 它是互聯網上最古老但使用最廣泛的概念之一。 隨着計算的新時代和Polymer設計方法的利用，我們實際上根本不打算使用它們。

從概念上講，有更多現代且有趣的方式可以向用戶顯示信息。 最普遍的概念之一是貫穿Polymer，Cards的整個想法。 您將通過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標簽。

但是，從更深層次的理解來看，我認為應該研究一種更現代的概念來顯示數據行。 開發適合現代概念的卡片或結構可以使您有效地利用要使用的現代工具。