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

在Seth的有用回应之前，我采用了另一种方法。这在表级使用单个on-click事件，并向该行添加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();
}

点击模板和{{}}占位符点击

2 个答案: