javascript - htmx: e.querySelectorAll 不是函数

Question

如果我使用 hx-swap-oob ，然后我得到一个错误:

<script src="https://unpkg.com/htmx.org@1.3.3/dist/htmx.js"></script>
<div id="sum">?</div>
<table>
 <tr>
  <td><button 
   hx-get="https://run.mocky.io/v3/b5a6902e-fc46-479b-92e4-9b4befc7a920"
   hx-target="closest tr">1</button>
  </td>
  <td>one</td>
 </tr>
</table>

按“运行代码片段”后，然后按 1 :

htmx:swapError
{
  "message": "e.querySelectorAll is not a function",
  "filename": undefined,
  "lineno": undefined,
  "colno": undefined
}

mocky http endpoint返回这个:

<tr>
  <td>2</td><td>two</td>
 </tr>

<div id="sum" hx-swap-oob="true">MAGIC</div>

在上面的例子中我使用了非缩小版，所以错误信息是:eltOrSelector.querySelectorAll is not a function

如果我使用这个端点，它不会失败:https://run.mocky.io/v3/2ab904eb-23a9-4006-b68b-f112b55841f3

但在我的用例中，新的 html 片段应该是 <tr>...</tr> , 不是 <div> .....

JS 堆栈跟踪:

Uncaught TypeError: eltOrSelector.querySelectorAll is not a function
    at findAll (htmx.js:295)
    at handleOutOfBandSwaps (htmx.js:501)
    at selectAndSwap (htmx.js:712)
    at doSwap (htmx.js:2284)
    at handleAjaxResponse (htmx.js:2358)
    at XMLHttpRequest.xhr.onload (htmx.js:2163)

更新

我可以将问题缩小为:

这失败了:

makeFragment('<tr><td>a</td></tr> <div>X</div>')

更新2

嗯，现在我知道为什么失败了:

parseFromString() Chrome 的根本原因是:

更新3

跟进问题:Make parseFromString() parse without validation

更新4

我创建了一个问题，希望有更多创造力的人知道如何解决这个问题:https://github.com/bigskysoftware/htmx/issues/469

Answer 1

根据您的问题，HTMX 团队创建了一个配置，可以启用它来支持这样的表片段。此处记录的示例:https://htmx.org/examples/update-other-content/#oob .如前所述，它不兼容 IE11。

htmx.config.useTemplateFragments = true;

加载htmx后在js文件中执行以下操作。