问题描述
我使用 htmx 通过 html-over-the-wire
更新我的页面的片段这很好用:
<table>
<tr id="offer_2">
<td>Sun 27.12</td>
<td>Spinach Lasagna</td>
<td>5.00€</td>
<td>1</td>
<td>
<button id="2" hx-post="/offer/2/add_offer_to_order"
hx-target="#offer_2" hx-swap="outerHTML">+</button>
<button id="2" hx-post="/offer/2/delete_offer_from_order"
hx-target="#offer_2" hx-swap="outerHTML">-</button>
</td>
</tr>
</table>
.... 在用户按下 +
或 -
按钮后,相应的行将更新为来自服务器的新版本。
我想给用户一些视觉反馈:
解决方法
您可以使用 hx-indicator 属性来完成此操作:
https://htmx.org/attributes/hx-indicator/
这将在 htmx 请求进行中时将类 'htmx-request' 添加到指定元素。
所以你可能会做这样的事情(利用 htmx 中“最接近”的语法):
<td hx-indicator="closest tr">
<button id="2" hx-post="/offer/2/add_offer_to_order"
-target="#offer_2" hx-swap="outerHTML">+</button>
<button id="2" hx-post="/offer/2/delete_offer_from_order"
hx-target="#offer_2" hx-swap="outerHTML">-</button>
</td>
然后在 htmx 请求进行中时为表格行创建 CSS 样式:
tr.htmx-request {
transition: all 500ms ease-in;
background-color:red; // for example
}
请注意,我在这里仅使用红色背景作为示例,以达到戏剧效果。您肯定会想要一些不同的样式。