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中获取包含详细信息的表行作为另一个<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自定义元素，并以此进行处理。同时，它“欺骗”浏览器以为这只是普通的<tr>

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

1 个答案: