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>