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)。我想这是因为阿尔卑斯需要一个单一的根元素。有什么方法可以绕过它吗，因为用div包装是无效的，而tbody包装破坏了布局？

Answer 1

由于阿尔卑斯模板被呈现在服务器端，我最终得到了以下解决方法：

当表有子行时，我移除根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 %}