htmx：onLoad：“全页加载”和“交换后”

Question

我想用我自己的方法初始化一个select元素，如tom-select 示例中的元素：

<select id="select-repo" placeholder="Pick a repository..." multiple></select>

function my_select_init(el) {
  new TomSelect(el, {
    persist: false,
    createOnBlur: true,
    create: true
  })
}

有两种不同的方式：

情况 1：加载整个页面

在这种情况下，您可以使用现代 onLoad 方法之一。

例如：

document.addEventListener('DOMContentLoaded', function () {
  // do something here ...
}, false);

情况2：片段通过htmx插入到DOM中

如何初始化片段？

首选解决方案

我希望 HTML 和加载代码位于一处（行为局部性），并且我希望该 html 片段在两种情况下都相同。

到目前为止，我没有使用 Hyperscript 或 Alpine.js，但我愿意使用这些库之一，如果这能让解决方案更简单的话。

Answer 1

您要使用的是htmx.onLoad回调：

  htmx.onLoad(function(elt) {
    // look up all elements with the tomselect class on it within the element
    var allSelects = htmx.findAll(elt, ".tomselect")
    for( select of allSelects ) {
      new TomSelect(select, {
                    persist: false,
                    createOnBlur: true,
                    create: true
                   });
    }
  })

当页面加载到body元素上时，此 javascript 将首先执行，然后针对 htmx 添加到页面的所有新内容执行。

请参阅https://htmx.org/docs/#3rd-party