Thymeleaf，Javascript内联和迭代

使用Spring MVC和Thymeleaf，我构建了一个带有JavaScript内部的html视图。Thymeleaf，Javascript内联和迭代

在页面中，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将使用jQuery引用每个按钮ID的问题。

在“另一个”视图分辨率的语言，我会用代码：

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

（上面可能不是100％语法正确，但我希望你的想法 - 我想要给这样做可以使用上面的样式）

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

th:inline="javascript"

引用单个模型的项目，我不看我怎么可以使用一看就根在脚本块中提供多个jQuery函数调用定义。

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

来源

2014-11-05 Chris Spiking

我会接受你的新想法邀请，并把我的方法论接近类似的案件。
显然，问题主要是关于后端和JavaScript数据之间的通信。在这种情况下，javascript函数需要的数据作为参数。由于html5引入了数据属性以及在晚期版本中改进了jQuery的效率，因此您可以将任何需要的后端数据公开为以“data-”开头的属性。根据html5，这是有效的。在jQuery中，您可以在减少初始“数据”修补符之后，通过将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")) 
}

或相似。

这样你也可以保持你的代码更清洁并且与标记分开，这是一个原理Unobtrusive JS

来源

2014-11-06 13:32:53 grid

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

由于页面中可以存在多个元素，因此我只需创建标记的外部循环并为每个按钮创建一个循环。在方法调用的细节将具有相同的索引/文本映射为迭代创建摆在首位的按钮，虽然文字创作是有点棘手：

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

不是最小的一次代码生成，但它的工作原理。

来源

2014-11-06 09:22:29

Thymeleaf，Javascript内联和迭代

回答

相关问题