Thymeleaf， Javascript内联和迭代

Question

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

在页面中，th： each与迭代值一起使用，为一组按钮提供唯一的超文本标记语言id。

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

我的问题出现在尝试生成javascript时，该javascript将对每个按钮id使用jQuery引用。

在另一种视图解析语言中，我会使用代码：

<% for(var i = 0; i < someObject.optionValues.length; i++) { %>
    $('#optionBtn_<%- i %>').on("click", function() {
        doSomething('<%= someObject.optionValues[i] %>');
    });
<% } %>

（以上可能不是100%语法正确，但我希望你明白——我试图做的是可能使用上述风格）

但是在Thymeleaf，虽然我知道我可以使用

th:inline="javascript"

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

有什么想法吗？（我可能在处理这个问题时完全错了，所以我也愿意接受这方面的新想法）

Answer 1

所以我做了一个变通办法。

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

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

代码生成后不是最小的，但它可以工作。

Answer 2

显然，问题主要在于后端数据和javascript数据之间的通信。在这种情况下，javascript函数需要作为参数的数据。由于html5引入了数据属性，并在后期版本中提高了jQuery的效率，您可以将任何您想要的后端数据作为以“data-”开头的属性公开。根据html5，这是有效的。在jQuery中，您可以通过将html命名约定转换为camelCase来访问它们，就像它们是jQuery数据一样。您可以在原始的html约定中访问它们（例如my属性）。这是偏好的问题。

这样，您的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>

然后可以将事件处理程序绑定为：

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

或类似的。

这样，您还可以保持代码的清洁，并与标记分开，这是不引人注目的JS的一个原则