如何在Thymeleaf+htmx+Alpine JS中将当前循环值传递至服务器？

我当前使用Thymeleaf、htmx、Tailwind及Alpine JS技术栈，通过Alpine JS的x-for循环渲染表格展示列表数据。现在需要实现：每行的删除按钮点击时，把当前行的item.filename传递给后端控制器，但现有代码无法正常工作，求解决方法。

现有代码 #

<tbody class="flex-1 sm:flex-none">
 <template x-for="item in searchResults">
  <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.processorName"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.filename"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.createdAt"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.status"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.completedAt"></td>
  <td class="border-grey-light border  p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">
    <button class="bg-red-500 hover:bg-teal-400 px-4 py-1 rounded text-white focus:outline-none" th:attr="hx-get=@{'/modal/filename=' + '${item.filename}'}" hx-trigger="click"
method="get" hx-target="#table" hx-swap="beforeend swap:0.5s">Delete</button></td>
  </tr>
  </template>
</tbody>

解决方法 #

问题出在Thymeleaf和Alpine的执行时机冲突：Thymeleaf是服务器端渲染引擎，它无法识别Alpine JS在客户端循环生成的item变量，所以原来的th:attr写法根本取不到客户端的item.filename值。

正确的做法是用Alpine JS的x-bind语法来绑定htmx的hx-get属性，这样就能拿到客户端循环里的item数据：

修正后的按钮代码 #

<button class="bg-red-500 hover:bg-teal-400 px-4 py-1 rounded text-white focus:outline-none"
        x-bind:hx-get="'/modal/filename=' + item.filename"
        hx-trigger="click"
        method="get"
        hx-target="#table"
        hx-swap="beforeend swap:0.5s">
  Delete
</button>

完整修正后的tbody代码 #

<tbody class="flex-1 sm:flex-none">
 <template x-for="item in searchResults">
  <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.processorName"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.filename"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.createdAt"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.status"></td>
  <td class="border-grey-light border hover:bg-gray-100 p-3" x-text="item.completedAt"></td>
  <td class="border-grey-light border  p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">
    <button class="bg-red-500 hover:bg-teal-400 px-4 py-1 rounded text-white focus:outline-none"
            x-bind:hx-get="'/modal/filename=' + item.filename"
            hx-trigger="click"
            method="get"
            hx-target="#table"
            hx-swap="beforeend swap:0.5s">
      Delete
    </button>
  </td>
  </tr>
  </template>
</tbody>

原理说明 #

• x-bind:hx-get会在客户端运行，直接读取Alpine循环中的item.filename值，拼接成正确的请求URL。
• 后端控制器只需要接收filename参数即可（比如Spring Boot中用@RequestParam("filename") String filename）。

内容的提问来源于stack exchange，提问作者Jason Mootoo