Thymeleaf，JavaScript内联和迭代 [英] Thymeleaf, Javascript Inlining and Iteration

问题描述

使用Spring MVC和Thymeleaf，我正在构建带有一些JavaScript的html视图.

Using Spring MVC and Thymeleaf, I am constructing an html view with some javascript inside.

在页面中，th:each与迭代值一起使用，以为一组按钮提供唯一的HTML ID.

Within the page, th:each is used with iteration values to give a set of buttons a unique 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>

我的问题出在尝试生成将使用jQuery引用每个按钮ID的JavaScript时.

My problem comes when trying to generate javascript that will use a jQuery reference to each button id.

在另一种"视图解析语言中，我将使用以下代码:

In 'another' view resolution language, I would use the code:

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

(以上在语法上可能并非100％正确，但我希望您能理解-使用以上样式，我想做的事情是可能的)

(the above may not be 100% syntactically correct, but I hope you get the idea - what I'm trying to do is possible using the above style)

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

but in Thymeleaf, whilst I understand that I can use

th:inline="javascript"

要引用各个模型项，我看不到如何使用外观在脚本块内生成多个jQuery函数调用定义.

to reference individual model items, I can't see how I can use a look to generate multiple jQuery function call definitions within a script block.

有什么想法吗? (我可能完全错误地解决了这个问题，因此在这方面也欢迎新想法)

Any ideas? (I may be approaching the problem completely wrong, so am open to new ideas on that front too)

推荐答案

我将接受您的新想法邀请，并将我处理类似案件的方法放在桌子上.
显然，问题主要出在后端与javascript数据之间的通信上.在这种情况下，javascript函数需要将其作为参数的数据. 由于html5在后期版本中引入了数据属性并提高了jQuery的效率，因此您可以将所需的任何后端数据公开为以"data-"开头的属性.根据 html5 的规定，这是有效的. 在jQuery中，您可以通过在减少了初始的"data-" pefix之后将html命名约定转换为camelCase来访问它们，就像它们是jQuery数据一样. (例如，data-my-attribute = myAttribute).您可以使用原始的html约定(例如my-attribute)来访问它们.这是一个优先事项.

I'll accept your invitation for new ideas and put on the table my methodology of approaching similar cases.
Clearly the problem is mostly about the communication between back-end and javascript data. The data that the javascript function needs as an argument in this case. Since html5's introduction of data attributes and the improved jQuery's efficiency with them in late versions, you may expose whatever back end data you want as attributes starting with "data-". This is valid according to html5. In jQuery you can access them as if they were jQuery data by translating the html naming convention to camelCase after reducing the initial "data-" pefix. (e.g. data-my-attribute = myAttribute). You can either access them in the original html convention (e.g. my-attribute). Its a matter of preference.

然后，您的html可能会更干净:

Then your html can be much cleaner:

<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>

您可以将事件处理程序绑定为:

You can bind your event handlers then as:

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

或类似的

通过这种方式，您还可以使代码保持整洁并与标记分离，而标记是 Unobtrusive JS的一项原则

This way you also keep your code cleaner and separate from the markup which is one principle of Unobtrusive JS

这篇关于Thymeleaf，JavaScript内联和迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！