自定义元素如何具有多个 <tr> 组件

Question

我想创建一个 <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>

如何在一个 aurelia CustomElement 中获取包含详细信息的 table 行作为另一个 <tr> 元素？

Answer 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 自定义元素并按原样处理它。同时，它 "fools" 浏览器认为这只是一个普通的 <tr>

自定义元素如何具有多个 <tr> 组件

How custom element can have multiple <tr> components

html-table

aurelia