java、Javascript内联和迭代

Question

使用Spring MVC和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>

我的问题出现在试图生成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

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

或者类似的

通过这种方式，您还可以保持代码更干净，与标记分离，这是Unobtrusive JS的一个原则