将 HTMX 与 bootbox.js 相结合

Question

我发现了这个结合 htmx 和 sweetalert2 的有趣示例：https://htmx.org/examples/confirm/

我尝试了一些来启动它运行 bootbox.js 但我没有得到任何回复:

<a class="pointer" hx-delete="/delete/"
   hx-trigger="confirmed"
   _="on click
      call bootbox.confirm({message: 'Do you want to delete it?'})'
      if result trigger confirmed">
   Delete object
</a>

知道我做错了什么吗？

谢谢！

Answer 1

不幸的是，bootbox.js 不能很好地与 hyperscript syntax you try to use. In the original example HTMX/hyperscript uses the Sweetaler2 库一起使用，returns 一个对象，hyperscript 可以在其中检查 isConfirmed 属性并触发相应的事件。但是 bootbox.js 不是这样的，它还需要一个回调函数。

但是，如果您不介意旧的、冗长的 jQuery 方法（bootbox.js 使用它），我们可以通过在 [=21= 中手动触发相应的 HTMX 事件来使其工作]'回调函数：

<a class="pointer" id="confirmbutton" hx-delete="/delete/" hx-trigger="confirmed">
  Delete object
</a>

<script>
$(document).ready(
  $("#confirmbutton").click(function(){
    bootbox.confirm({message: 'Do you want to delete it?',
                     callback: function(ok) {
                       if (ok) {htmx.trigger(htmx.find("#confirmbutton"), "confirmed")}
                    }})
  })
)
</script>

bootbox.js returns true 在 ok 变量中如果用户点击确认按钮，那么我们可以触发相应的事件。

将 HTMX 与 bootbox.js 相结合

Combining HTMX with bootbox.js

bootbox

htmx