hx-sync

hx-sync 属性を使用すると、複数の要素間で AJAX リクエストを同期できます。

hx-sync 属性は、同期する要素を示す CSS セレクタで構成され、オプションでコロン、さらにオプションで同期の戦略が続きます。利用可能な戦略は次のとおりです:

• drop - 既存のリクエストが送信中の場合、そのリクエストをドロップ（無視）します（デフォルト）
• abort - 既存のリクエストが送信中の場合、そのリクエストをドロップ（無視）します。ただし、それが当てはまらない場合、別のリクエストが進行中の間にこのリクエストが発生した場合、このリクエストを中止します
• replace - 現在のリクエストがある場合はそれを中止し、このリクエストに置き換えます
• queue - このリクエストを、指定された要素に関連付けられたリクエストキューに入れます

queue 修飾子は、キューに入れる方法を正確に示す追加の引数を取ることができます

• queue first - リクエストが送信中の間に現れた、最初のリクエストをキューに入れます
• queue last - リクエストが送信中の間に現れた、最後のリクエストをキューに入れます
• queue all - リクエストが送信中の間に現れた、すべてのリクエストをキューに入れます

メモ

• hx-sync は継承され、親要素に配置できます

この例では、フォームの送信リクエストと個々の入力の検証リクエストの競合条件を解決します。通常、hx-sync を使用せずに、入力を完了してすぐにフォームを送信すると、/validate と /store に対して 2 つのパラレルリクエストがトリガーされます。入力に hx-sync="closest form:abort" を使用すると、フォームのリクエストが監視され、入力リクエストが送信中の間にフォームリクエストが存在するか開始した場合、入力のリクエストが中止されます。

<form hx-post="/store">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:abort">
    <button type="submit">Submit</button>
</form>

送信リクエストより検証リクエストを優先したい場合は、drop 戦略を使用できます。この例では、検証リクエストが送信リクエストよりも優先されるため、検証リクエストが送信中の場合、フォームを送信できません。

<form hx-post="/store">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:drop"
    >
    <button type="submit">Submit</button>
</form>

多くの入力があるフォームを扱う場合、フォームタグで hx-sync replace 戦略を使用して、すべて入力検証リクエストより送信リクエストを優先できます。これにより、送信中の検証リクエストがキャンセルされ、hx-post="/store" リクエストのみが発行されます。送信リクエストを中止して、既存の検証リクエストを優先する場合は、フォームタグで hx-sync="this:abort" 戦略を使用できます。

<form hx-post="/store" hx-sync="this:replace">
    <input id="title" name="title" type="text" hx-post="/validate" hx-trigger="change" />
    <button type="submit">Submit</button>
</form>

アクティブ検索機能を実装する場合、hx-trigger属性の遅延修飾子はユーザー入力をデバウンスして、ユーザーが入力中に複数のリクエストが行われないように使用できます。ただし、リクエストが行われると、前のリクエストの処理が完了していない場合でも、ユーザーが再度入力を始めると新しいリクエストが開始されます。この例では、実行中のリクエストをすべてキャンセルし、最後のリクエストのみを使用します。検索入力がターゲット内に含まれている場合は、この例にあるようなhx-syncを使用すると、ユーザーが入力中でも入力が置き換えられる可能性が低くなります。

<input type="search" 
    hx-get="/search" 
    hx-trigger="keyup changed delay:500ms, search" 
    hx-target="#search-results"
    hx-sync="this:replace">