Repeating tr in Aurelia

by

I stumbled into one of those subtle little gotchas today with Aurelia.

Browsers’ only allow tr tags inside a tbody, and td tags inside a tr. As such, if you want to repeat a table row in Aurelia then rather than add a custom tag, you need to indicate to Aurelia that your component element is replacing another element by setting the as-compose attribute.

<tr repeat.for="x of obj" as-element="my-element" x.bind="x"></tr>

Where I got caught was with the (my-)element template. I wanted table cells so I created the following:

<template>
  <require from="../../resources/elements/typeahead"></require>
  <td>${x.value}</td>
  ...
</template>

However this didn’t work – it effectively removed any td.
The problem was that during rendering Aurelia directly combines the template and parent, creating an invalid HTML structure like this:

<tr>
  <require from="../../resources/elements/typeahead"></require>
  <td>...

Fixing the problem then is very simple: just move the require inside the first td:

<template>
  <td>
    <require from="../../resources/elements/typeahead"></require>
    ${x.value}
  </td>
  ...
</template>