HTMXで履歴管理(history) - プログラミング学習サイト

historyサポート

HTMXは、ブラウザ履歴APIと対話するための簡単なメカニズムを提供します。

特定の要素がその要求URLをブラウザナビゲーションバーにpushし、ページに現在の状態を追加したい場合、ブラウザの履歴には、hx-push-url 属性を含めます。

<a hx-get="/blog" hx-push-url="true">Blog</a>

ユーザーがこのリンクをクリックすると、HTMXは現在のDOMをスナップショットし、/blogにリクエストする前に保存します。その後、DOM要素のスワップを行い、新しい状態を履歴スタックに押し込みます。

ユーザーが戻るボタンを押下すると、HTMXはストレージから古いコンテンツを取得し、ターゲットに戻し、前の状態にシミュレートします。

historyスナップショット要素を指定します

デフォルトでは、HTMXはbodyを指定して、履歴スナップショットを取り、復元します。これは通常正しいことですが、スナップショットに指定の要素を使用する場合は、hx-history-etlを使用できます。

Historyスナップショットを無効化する

キャッシュに入る機密データを防ぐために、hx-history属性をfalseに設定することにより、履歴スナップショットを無効にすることができます。これは、共有使用のPCにとっては重要な設定です。

サードパーティライブラリによる#ONDOING DOM変異

サードパーティライブラリを使用していて、HTMX履歴機能を使用したい場合は、前にDOMをクリーンアップする必要がありますスナップショットが取られます。Tom Select Libraryを考えてみましょう。はるかに豊富なユーザーエクスペリエンス。TomSelectをセットアップして、.TomSelectクラスを備えた入力要素をリッチに変換しましょう要素を選択します。

まず、新しいコンテンツのクラスを持つ要素を初期化する必要があります。

htmx.onLoad(function (target) {
    // find all elements in the new content that should be
    // an editor and init w/ quill
    var editors = target.querySelectorAll(".tomselect")
            .forEach(elt => new TomSelect(elt))
});

これにより、.tomSelectクラスがあるすべての入力要素に対してリッチセレクターが作成されます。しかし、それは変異します DOMと私たちは、TomSelectが再活性化されると、その突然変異が歴史キャッシュに保存されたくありません。履歴コンテンツは画面にロードされます。

これに対処するには、HTMXをキャッチする必要があります。それらを破壊する（）：

htmx.on('htmx:beforeHistorySave', function() {
    // find all TomSelect elements
    document.querySelectorAll('.tomSelect')
            .forEach(elt => elt.tomselect.destroy()) // and call destroy() on them
})

これにより、DOMを元のHTMLに戻すため、クリーンなスナップショットが可能になります。