javascript - htmx: onLoad: 「全ページ読み込み時」および「スワップ後」

Question

tom-select の例のように、独自の方法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
  })
}

2 つの異なる方法があります。

ケース 1: ページ全体が読み込まれる

この場合、最新の onLoad メソッドの 1 つを使用できます。

例えば：

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

ケース 2: フラグメントが htmx 経由で DOM に挿入される

スニペットを初期化する方法は?

優先ソリューション

HTML とオンロード コードを 1 か所 ( Locality of Behavior ) に配置し、この HTML フラグメントを両方のケースで同じにする必要があります。

今のところ、Hyperscript や Alpine.js は使用していませんが、ソリューションが簡単になるのであれば、これらのライブラリのいずれかを使用することにオープンです。