Htmx вставка нескольких строк таблицы
Я использую Django, если это имеет какое-то значение. В любом случае, у меня есть этот tbody
элемент в моем шаблоне:
<tbody
id="log-stream-table-body"
hx-get="{% url 'pages:log_stream_rows' %}?last_ts={{ last_log_ts }}"
hx-trigger="every 30s"
hx-target="this"
hx-swap="afterbegin"
>
{% include "pages/_home_log_stream_rows.html" with log_stream=log_stream %}
</tbody>
Урл, на который он указывает, возвращает этот фрагмент шаблона (который на самом деле pages/_home_log_stream_rows.html
используется в include выше):
{% for log in log_stream %}
<tr>
<td>{{ log.ts|date:"Y-m-d H:i:s.u" }}</td>
<td>{{ log.process }}</td>
<td>{{ log.source }}</td>
<td>{{ log.message }}</td>
</tr>
{% endfor %}
<div
id="log-stream-hyperscript"
hx-swap-oob="outerHTML"
data-log-ts="{{ last_log_ts }}"
></div>
Проблема в том, что я возвращаю несколько элементов tr
на верхнем уровне, так что все это просто не работает.
Я могу обернуть его в тег <template>
, и он работает, но, конечно, тогда ничего не видно. Обертывание в любой другой тег (div
и другие tbody
) просто ломает отображение различными способами.
Как сгруппировать эти несколько элементов tr
, чтобы htmx правильно добавлял их в верхнюю часть таблицы?
Я не понимаю, почему HTMX ведет себя таким образом, но я заставил его работать с ответом, выглядящим следующим образом, т.е. используя oob-swaps для обеих вещей:
<tbody hx-swap-oob="afterbegin:#log-stream-table-body">
<tr>
<td>{DateTime.Now}</td>
<td>1</td>
<td>{r.Next()}</td>
</tr>
<tr>
<td>{DateTime.Now}</td>
<td>2</td>
</tr>
<tr>
<td>{DateTime.Now}</td>
<td>3</td>
</tr>
</tbody>
<div id="log-stream-hyperscript"
hx-swap-oob="outerHTML"
data-log-ts="{DateTime.Now}">{DateTime.Now}</div>
(Это тестовые данные, использующие ASP.Net Core, у меня нет здесь сервера Python/Django)
Используется последняя версия HTMX 2.0.0, но не уверен, что это имеет значение.