Aurelia 自定义元素，其中包含一个带有插槽的表格

Question

我有一个要呈现表格的 Aurelia 自定义元素。它需要针对 OData 源控制分页等。我希望自定义元素的消费者提供行模板。我的元素的模板如下所示：

<template>
  <div class="odata-table">
    <div class="row">
      <table>
        <thead>
          <tr>
            <th repeat.for="column of columns">
              ${column.title}
            </th>
          </tr>
        </thead>
        <tbody>
          <slot></slot>
        </tbody>
      </table>
    </div>
  </div>
</template>

然后当我食用它时：

<odata-table view-model.ref="resultsTable" url="http://localhost:5000/odata/v1/FooBar">
    <tr repeat.for="record of resultsTable.records" slot="rows">
      <td>${record.Foo}</td>
      <td>${record.Bar}</td>
    </tr>
</odata-table>

这些行永远不会出现在我的身体内。如果我将槽移到表外并用 ul & li 替换 tr & td，它会呈现数据就好了。

我需要做些什么来允许表格元素中的插槽？

Answer 1

这里的问题是浏览器本身，而不是 Aurelia。浏览器出现并看到<slot> 元素并知道它不是<tbody> 的有效子元素，因此将其删除。这就是as-element 属性发挥作用的地方。

但是，在您的特定场景中，as-element 允许您装饰 HTML 元素并让 Aurelia 将其解析为其他内容，但在您尝试使用本质上是内容的 <slot> 元素时可能无法在此处使用投影。

这很可能需要重新设计您的应用程序。考虑使用通过自定义元素传入的可绑定值来动态组合您的标记。