HTMX 不会重新处理 Server-Sent-Events 的 sse-swap 属性

Question

我有一个仪表板，其中包含我想在网站上可视化的各种系统信息。为简单起见，我决定使用 HTMX 通过以下方式将实时性能指标发送到网站 服务器发送的事件，特别是

sse

扩展。

在这个网站上，我有数量可变的表，这些表应该在应用程序运行期间填充。首先，该表通过 SSE 发送，没有任何条目，当数据进入时，应该将一行添加到表中。该表有一个

sse-swap

属性，该属性应该侦听用于该特定表的行，但 HTMX 不会侦听

sse-swap

属性。

当我通过将表静态插入index.html 来测试它时，添加行是有效的。我什至尝试使用 JavaScript API

htmx.process(element)

手动重新处理新添加的属性，但这也没有注册表的

sse-swap

属性。

重新处理新元素的代码：

htmx.onLoad(function(elt){htmx.process(elt)})

随事件动态添加的表结构：

document

<div class="card col-lg-6 border-0 mx-1 shadow-lg rounded-0" id={{name}}>
    <div class="card-body w-100 p-0">
      <table class="table table-hover table-striped table-sm m-0">
        <thead class="small">
          <tr>
            <th class="small">Component</th>
            <th class="small">URL-Wait</th>
            <th class="small">Serialization</th>
            <th class="small">Deserialization</th>
            <th class="small">Annotator</th>
            <th class="small">Component-Total</th>
            <th class="small">Worker-Total</th>
            <th class="small">Size</th>
          </tr>
        </thead>
        <tbody sse-swap="{{ name }}_measurement" hx-swap="beforeend">
          
        </tbody>
      </table>
    </div>
  </div>

表行应该附加到 - 元素（但现在不是），事件为：{{ name }}_measurement

<tr>
    <td class="small"> {{ component }} </td>
    <td class="small"> {{ urlwait }} </td>
    <td class="small"> {{ serialization }} </td>
    <td class="small"> {{ deserialization }} </td>
    <td class="small"> {{ annotator }} </td>
    <td class="small"> {{ component_total }} </td>
    <td class="small"> {{ worker_total }} </td>
    <td class="small"> {{ document_size }} </td>
</tr>

Index.html，这是建立连接的起点：

<div hx-ext="sse" sse-connect="/document_update"class="container-fluid m-1 p-1 rounded-0"  id="componentDashboard">
        <div class="row mb-2 mb-xl-3">
          <div class="col-auto d-none d-sm-block">
            <h3><strong></strong></h3>
          </div>
        </div>
        <div sse-swap="document" hx-swap="beforeend" class="row gap-4 flex-nowrap overflow-auto" id="scrollable-components">
          
        </div>
      </div>

我很感激任何关于如何处理这个问题的建议。最好使用最少的 Javascript :)