Как пользовательский элемент может иметь несколько компонентов <tr>

Я хочу создать один <table>, в котором несколько пользовательских элементов могут иметь несколько компонентов <tr>.
Я пытался использовать containerless, но элемент отображался за пределами <table>.

<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <order-line repeat.for = "line of lines" line.to-view = "line" containerless></order-line>
  </tbody>
</table>

И пользовательский элемент выглядит так

<template>
  <tr>
    <td>${line.position}</td>
    <td>${line.name}</td>
  </tr>
  <tr if.to-view = "detailsVisible">
    <td colspan = "2">${line.complicatedDescription}</td>
  </tr>
</template>

Как я могу получить строку таблицы с деталями в качестве другого элемента <tr> в одном пользовательском элементе aurelia?

🤔 А знаете ли вы, что...
С помощью Aurelia можно создавать SPA-приложения (Single Page Applications) с высокой производительностью.


1
147
1

Ответ:

Решено

Это ограничение спецификации html. Элемент <table> не может содержать элементы, отличные от <tbody>, <tr> и т. д.

Вы можете использовать as-element, чтобы обойти это ограничение:

<tr as-element = "order-line" repeat.for = "line of lines" line.to-view = "line" containerless></tr>

Это сообщает компилятору шаблона, что этот <tr> на самом деле является настраиваемым элементом order-line и обрабатывает его как таковой. При этом он «обманывает» браузер, заставляя его думать, что это обычная <tr>