Thymeleaf、Javascript内联和迭代

使用SpringMVC和Thymeleaf，我正在构建一个包含一些javascript的html视图

在页面中，th：每个都与迭代值一起使用，为一组按钮提供唯一的HTML id

<td th:each="optionValue,iterStat : ${someObject.optionValues}">
  <button class="btn btn-default" th:id="${'optionBtn_' + (iterStat.count - 1)}" th:text="${optionValue.toString()}" />
</td>

为了引用单个模型项，我看不出如何使用look在脚本块中生成多个jQuery函数调用定义

---

有什么想法吗？（我对这个问题的理解可能是完全错误的，所以我对这方面的新想法也持开放态度）

因此我做了一个变通方法

因为一个页面中可以存在多个元素，所以我只需创建一个标记的外部循环，并为每个按钮创建一个。方法调用中的细节将具有与最初创建按钮的迭代中相同的索引/文本映射，尽管文本创建有点棘手：

<script th:each="optionValue,iterStat : ${someObject.optionValues}">
   $([[${'#optionBtn_' + (iterStat.cont - 1)}]]).on("click", function() {
      buttonPressed([[${iterStat.count - 1}]], [[${estimateOption.toString()}]]);
   });
</script>

$（[${'#optionBtn_'+（iterStat.cont-1）}]]）{
按下按钮（[${iterStat.count-1}]]，[[${estimateOption.toString（）}]]；
});

---

一旦代码生成，它就不是最小的，但它是有效的。

我将接受您的邀请，提出新的想法，并提出我处理类似案例的方法。
显然，问题主要在于后端和javascript数据之间的通信。在本例中，javascript函数作为参数所需的数据。 由于html5引入了数据属性，并在最新版本中提高了jQuery的效率，因此您可以将任何需要的后端数据公开为以“data-”开头的属性。这是有效的根据。 在jQuery中，您可以通过减少初始“data-”后将html命名约定转换为camelCase来访问它们，就好像它们是jQuery数据一样。（例如，数据我的属性=我的属性）。您可以在原始html约定（例如“我的属性”）中访问它们。这是一个偏好的问题

这样，您的html就会更干净：

<td th:each="optionValue,iterStat : ${someObject.optionValues}">
  <button class="btn btn-default" th:id="${'optionBtn_' + (iterStat.count - 1)}" th:text="${optionValue.toString()}" th:attr="data-my-func-attr=${optionValue}"/>
</td>

或类似的

通过这种方式，您还可以保持代码更干净，并且与标记分离，这是一项基本的操作原则

<script th:each="optionValue,iterStat : ${someObject.optionValues}">
   $([[${'#optionBtn_' + (iterStat.cont - 1)}]]).on("click", function() {
      buttonPressed([[${iterStat.count - 1}]], [[${estimateOption.toString()}]]);
   });
</script>

<td th:each="optionValue,iterStat : ${someObject.optionValues}">
  <button class="btn btn-default" th:id="${'optionBtn_' + (iterStat.count - 1)}" th:text="${optionValue.toString()}" th:attr="data-my-func-attr=${optionValue}"/>
</td>

$("button.btn").on("click", function() {
      buttonPressed($(this).data("my-func-attr"))
}