Find a performant approach to interact with HX-Trigger in HTMX

htmx_question.md

V1

This listens for a HX-Trigger moGetBookmarkButton_ID event on the #bookmark_item_* element to trigger hx-get

kirby()->response()->header('HX-Trigger','moGetBookmarkButton_' . $product->id())
//kirby()->response()->header('HX-Trigger','moGetBookmarkButton_b2')

- var values = { a1: 'Item A', b2: 'Item B', d4: 'Item 4' };
each item, id in values
	div(id=`bookmark_item_${id}`,hx-get=`bookmark/${id}`,hx-trigger=`moGetBookmarkButton_${id} from:body`)= item
	//- div(id=`bookmark_item_b2`,hx-get=`bookmark/b2`,hx-trigger=`moGetBookmarkButton_b2 from:body`)= item

• Pro: transparent code, no extra JS
• Contra: How performant is this, in a list of 100 #bookmark_item_* elements, 100 hx-trigger="moGetBookmarkButton_*" are listening?

V2

• Sending a HX-Trigger moTriggerGetBookmarkButton with the product ID
• catching that with JS and send another event moGetBookmarkButton to hx-get the resource on the right element with [id]

kirby()->response()->header('HX-Trigger', json_encode([
	'moTriggerGetBookmarkButton'=> crc32($id) (1)
]));

(1) I need to know more about the frontend (that IDs are crc32 hashed because they have / that are not valid in html[id])

- var values = { a1: 'Item A', b2: 'Item B', d4: 'Item 4' };
each item, id in values
	div(id=`bookmark_item_${id}`,hx-get=`bookmark/${id}`,hx-trigger="moGetBookmarkButton")= item


script
	htmx.on("moTriggerGetBookmarkButton", function(evt){
		htmx.trigger('#bookmark_item_'+evt.detail.value, 'moGetBookmarkButton');
	})	

• Pro: only one event on each element (performance?)
• Contra: ping ponging around 2 Events/Trigger

V3

Send the HX-Trigger with the ID

kirby()->response()->header('HX-Trigger', json_encode([
	'moGetBookmarkButton'=> crc32($id) (1)
]));

Use the condition [isItMe()] to check which element with hx-trigger="moGetBookmarkButton[isItMe()] should be triggered

But how do I get the ID from HX-Header and which element is it currently checked against?

- var values = { a1: 'Item A', b2: 'Item B', d4: 'Item 4' };
each item, id in values
	div(id=`bookmark_item_${id}`,hx-get=`bookmark/${id}`,hx-trigger="moGetBookmarkButton[isItMe()] from:body")= item

script
	function isItMe() {
		return ( this current HTML Element #bookmark_item_* === '#bookmark_item_'+ HX-Trigger[moGetBookmarkButton].evt.detail.value);
	}

• Pro: no extra event like in V2
• Contra: How do I write the condition for isItMe()?