Dart template, and {{}} placeholder in on-click

Question

I am experimenting with various ways to create a HTML5 table from data using Dart. I have the following:

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

The idea is to have one on click handler which takes the site id as a parameter. but the parameter to displaySite is not set correctly - this function receives the literal string {{x[1]}}.
The site name x[1] is displayed correctly.

So my question is: Is it possible to have {{}} substitution work inside the parameter list of the on click handler?

Answer 1

Simply remove the {{ }} from the displaySite() call in on-click, and it will work.

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

Hope that helps!

Answer 2

Before Seth's useful response, I cam up with another approach. This uses a single on-click event at the table level, and adds a data-id attribute to the row. Any comments on which approach is better, or if there is a more standard 'Dartful' approach I should be using, would be much appreciated!

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

And the Dart code:

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