Alpine.js中的多个根节点

Question

使用最新的Alpine.js(v3.7.0(构建数据表。在尝试实现子行时遇到问题(即在主/父行下添加一个可切换行(。

简化版：

<tbody>
<template x-for="row in currentPageData" :key="row.id">
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td colspan="3">
Some additional content
</td>
</tr>
</template>
</tbody>

虽然我在控制台中没有得到任何错误，但第二个节点(tr(没有被渲染。我想这是因为Alpine需要一个单一的根元素。有没有办法解决这个问题，因为用div包装是无效的HTML，而tbody包装会破坏布局？

Answer 1

由于Alpine模板在服务器端呈现，我最终找到了以下解决方法：

当表有子行时，我删除根tbody，并用自己的tbody包装每个tr对。

编辑(23-9-22(：

根据@NoobnSad在twig:中的请求代码

{% if not options.enableChildRows %}
<tbody>
{% endif %}
<template x-for="row in currentPageData" :key="row.id">
{% if options.enableChildRows %}
<tbody>
{% endif %}
<tr>
{% if options.enableChildRows %}
{% include datatable.componentPath('childRowToggler') %}
{% endif %}
{% include datatable.componentPath('tableCells') %}
</tr>
{% if options.enableChildRows %}
{% include datatable.componentPath('childRow') with {tableHandle:datatable.handle} %}
</tbody>
{% endif %}
</template>
<template x-if="recordsCount===0">
{% include datatable.componentPath('notFound') %}
</template>
{% if not options.enableChildRows %}
</tbody>
{% endif %}

Answer 2

由于一个表中允许多个tbody标记，因此可以将多个tr标记封装在一个tbody标记中。

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<table>
<template x-for="i in [1,2,3]" :key="i">
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test2</td>
</tr>
</tbody>
</template>
</table>