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>

这些行永远不会出现在我的体内。如果我将插槽移到桌子外面并更换tr＆amp; td与ul＆amp; li，它使数据很好。

我是否需要做一些事情来允许表元素中的插槽？

Answer 1

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

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

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