dart - Dart 模板和 {{}} 占位符在点击

Question

我正在尝试使用 Dart 从数据中创建 HTML5 表格的各种方法。我有以下内容：

<table id="sitelist">
  <thead>
    <tr><th>Select a site</th>
      </tr>
    </thead>
  <tbody template iterate="x in siteCells">
    <tr on-click="displaySite('{{x[0]}}')"> <td> {{x[1]}} </td>
      </tr> 
    </tbody>
  </table>

这个想法是有一个点击处理程序，它将站点 ID 作为参数。但 displaySite 的参数设置不正确 - 此函数接收文字字符串{{x[1]}}。
站点名称x[1]显示正确。

所以我的问题是：是否可以在点击处理程序的参数列表中进行 {{}} 替换工作？

Answer 1

只需在{{ }}点击时从 displaySite() 调用中删除，它就会起作用。

<table id="sitelist">
  <thead>
    <tr><th>Select a site</th>
    </tr>
  </thead>
  <tbody template iterate="x in siteCells">
    <tr on-click="displaySite(x[0])"> <td> {{x[1]}} </td>
    </tr>
  </tbody>
</table>

希望有帮助！

Answer 2

在赛斯有用的回应之前，我想出了另一种方法。这在表级别使用单个单击事件，并将 data-id 属性添加到行。任何关于哪种方法更好的评论，或者如果我应该使用更标准的“Dartful”方法，将不胜感激！

  <template if="showSiteList == true">
    <table class="table-select" id="sitelist2" on-click="tableClicked($event)">
      <thead>
        <tr><th>Choose a site</th>
          </tr>
        </thead>
        <tbody template iterate="x in siteCells">
          <tr data-id={{x[0]}} > <td> {{x[1]}} </td>
            </tr> 
          </tbody>
      </table>  
    </template>

还有 Dart 代码：

void tableClicked(Event e) {
 TableCellElement cell = e.target;
 TableRowElement row = cell.parent; 
 if (row.dataAttributes.containsKey('id')) {
   int id = int.parse(row.dataAttributes['id']);
   if (id != null) { // be a bit paranoid
      globSiteId = id;
   }   
 }
 showSiteList = false;
 watchers.dispatch();
}