htmx初心者向け勉強会

#hx-swap-oob

hx-swap-oob

基本は hx-target の場所を更新するのが基本ですが、hx-swap-oob を利用すると、hx-target の場所に加えて hx-swap-oob の場所も置き換えることができます。

<form action="/sample/swap-oob.html" method="POST"
hx-post="/sample/swap-oob.html"
hx-trigger="submit"
hx-target="this"
hx-swap="outerHTML">
<input type="submit" name="submit" value="demo">
</form>

<div id="result-a" class="demo">Aエリア id="result-a"</div>
<div id="result-b" class="demo">Bエリア id="result-b"</div>
<div id="result-c" class="demo">Cエリア id="result-c"</div>

※ hx-swap を none にしてみよう！ ボタンが消えずに残ります。

Aエリア id="result-a"
Bエリア id="result-b"
Cエリア id="result-c"

swap-oob.html のコードを確認する

<div>更新しました</div>
<div id="result-a" class="demo" hx-swap-oob="true">複数の場所を</div>
<div id="result-c" class="demo" hx-swap-oob="true">別々に更新！</div>

a-blog cms template

a-blog cms が呼び出す summary.html のテンプレートと、 htmx が呼び出す summary.html テンプレートを共通化するための方法をご紹介します。

index.html

a-blog cms が動作し、index.html のテンプレートが呼び出されると、Topicpath モジュールや Entry_Summary モジュールがインクルードされています。

@extends("/_layouts/basic.html")

@section("topic-path")
@include("/include/topicpath.html")
@endsection

@section("main")
@include("/include/htmx/summary.html", {"multi_swap": "off"})
@endsection

ここで a-blog cms の一覧ページのテンプレート index.html から summary.html がインクルードされる際には、変数 multi_swap に off がセットされるように設定されています。

summary.html

<div id="main-contents">
<!-- BEGIN_MODULE Entry_Summary -->
（略）
<!-- END_MODULE Entry_Summary -->
</div>

<!-- BEGIN_IF [{{multi_swap}}/neq/off] -->

<div id="topicpath" hx-swap-oob="true">
<!-- BEGIN_MODULE Topicpath -->
（略）
<!-- END_MODULE Topicpath -->
</div>
<!-- BEGIN_MODULE Ogp -->
<title>{title}</title>
<!-- END_MODULE Ogp -->

<!-- END_IF -->

IFブロックで変数 multi_swap が off でない時（ htmx で呼ばれる時 ）に、Topicpathモジュールと <title> が表示されるように書かれています。

  1. <title> 〜 </title> は、タイトルタグと置き換えが行われます。
  2. hx-swap-oob="true"属性の付いている id のコンテンツは、現在表示されている HTML の同じ id と置き換えられます。
  3. 残った <div id="main-contents"> の部分が、hx-target のエリアに hx-swap の方法で置き換えが実行されます。

最新記事

カテゴリー

アーカイブ

ハッシュタグ

©2024 https://d9hqioo2.ablogcms.io/