Шаблон Dart и заполнитель {{}} в контекстном меню

Я экспериментирую с различными способами создания таблицы HTML5 из ​​данных с помощью Dart. У меня есть следующее:

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

Идея состоит в том, чтобы иметь один обработчик кликов, который принимает идентификатор сайта в качестве параметра. но параметр displaySite задан неправильно - эта функция получает литеральную строку {{x[1]}}.
Имя сайта x[1] отображается правильно.

Итак, мой вопрос: возможно ли, чтобы подстановка {{}} работала внутри списка параметров обработчика кликов?


dart dart-webui
person Peter B    schedule 18.12.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Просто удалите {{ }} из вызова 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>

Надеюсь, это поможет!

person Seth Ladd    schedule 19.12.2012
comment
Спасибо, это работает! Я предполагаю, что из-за контекста, в котором выполняется щелчок... Есть ли более простой/лучший способ реализовать эту интерактивную функциональность таблицы? - person Peter B; 19.12.2012
comment
Я думаю, что это довольно просто, на самом деле :) - person Seth Ladd; 19.12.2012
comment
Да... но проще было бы: ‹tbody template iterate=x in siteCells rowcallback=siteList(x[0])› ‹tr› ‹td› {{x[1]}} ‹/td› - person Peter B; 20.12.2012

arrow_upward
1
arrow_downward

Перед полезным ответом Сета я придумал другой подход. При этом используется одно событие щелчка на уровне таблицы и добавляется атрибут 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>

И код Дарта:

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();
}
person Peter B    schedule 19.12.2012