htmx:加载JS库并执行函数？

Question

我确实通过htmx更新了一个html片段。

如何加载这个新代码片段所需的JS库？

如何在代码段加载后执行函数？

示例：

我想要显示一个快乐的动画(confetti)后，html代码片段被添加到页面。

这意味着浏览器需要加载以下内容：

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>

加载上述lib之后，需要执行一个JS函数。

如何使用htmx做到这一点？

Answer 1

现在还没有办法在htmx内置的页面上加载一个新的库(这是一个必要的特性，请为它记录一个问题)，所以五彩纸屑库最初应该作为你的主站点的一部分。

在主网站中包含了外部库之后，您可以包含一个普通的script标记来执行必需的内联五彩纸屑代码：

<script>
var myCanvas = document.createElement('canvas');
document.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas, {
  resize: true,
  useWorker: true
});
myConfetti({
  particleCount: 100,
  spread: 160
  // any other options from the global
  // confetti function
});
</script>

Answer 2

我找到了一个解决方案。我想它可以得到改进。如果你知道更简单的方法，请留下评论。

// lala.js 
// this file gets loaded in the page (before the hx-post call)

function loadScript(url, callback) {
    // https://stackoverflow.com/a/950146/633961
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
};

document.body.addEventListener("confetti", function(evt){
    var target = document.getElementsByClassName('htmx-settling')[0];
    loadScript('https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js',
        function () {
            var myCanvas = document.createElement('canvas');
            var rect = target.getBoundingClientRect();
            myCanvas.setAttribute('style', 'position: absolute; top:' +
                rect.top + 'px; left:' + rect.left + 'px');
            target.appendChild(myCanvas);

            var myConfetti = confetti.create(myCanvas, {
                resize: true,
                useWorker: true
            });
            myConfetti({
                particleCount: 100,
                spread: 160
                // any other options from the global
                // confetti function
            })
        })
})

在服务器端，我像这样返回响应(Django)：

def confetti_hx(request):
    ...  
    response = HttpResponse(html)
    response['HX-Trigger-After-Swap'] = 'confetti'
    return response