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>

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

另一个＆＃39;查看解析语言，我会使用代码：

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

（以上可能不是100％在语法上正确，但我希望你能得到这个想法 - 我尝试做的事情可以使用上述风格）

但在Thymeleaf，虽然我明白我可以使用

th:inline="javascript"

引用单个模型项，我无法看到如何在脚本块中使用外观生成多个jQuery函数调用定义。

有什么想法吗？（我可能正在接近完全错误的问题，所以我也可以接受这方面的新想法）

Answer 1

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

然后你的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"))
}

或类似。

通过这种方式，您还可以使代码更清晰，并与标记分开，这是html5

的一个原则

Answer 2

所以我做了一个解决方法。

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

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

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

Thymeleaf，Javascript内联和迭代

2 个答案: