Thymeleaf - 在 Javascript 代码中迭代模型属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29799493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Thymeleaf - Iterating over a model attribute inside Javascript code
提问by mtyurt
I'm trying to write some Javascript code where I need to use a model attribute. Here is how I define the script tag:
我正在尝试编写一些需要使用模型属性的 Javascript 代码。这是我定义脚本标签的方式：
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
//need some loops
/*]]>*/
</script>
What I need to do is, using eachiterations over model attributes inside the script. So far I couldn't manage to do this with th:each. Any help is appreciated.
我需要做的是，each在脚本中使用模型属性的迭代。到目前为止，我无法使用th:each. 任何帮助表示赞赏。
回答by snw
I guess you need to wrap your model attrubite in double brackets, like this: [[${modelAttribute}]]. The script inlining section of the Thymeleaf docs can help a bit:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#script-inlining-javascript-and-dart
我想你需要用你的模型attrubite在双括号，就像这样：[[${modelAttribute}]]。Thymeleaf 文档的脚本内联部分可以提供一些帮助：http:
//www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#script-inlining-javascript-and-dart
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var theList = [[${modelAttribute}]]
for (i = 0; i < theList.length; i++) {
doSomething(theList[i]);
}
/*]]>*/
</script>
回答by yglodt
You can also do like this, which is the most compact I guess:
你也可以这样做，我猜这是最紧凑的：
In your @Controller:
在您的@Controller：
model.addAttribute("items", new String[] { "item1", "item2", "item3" });
In your template:
在您的模板中：
<script type="text/javascript" th:inline="javascript">
var items = [];
/*[# th:each="n : ${items}"]*/
items.push("[(${n})]");
/*[/]*/
</script>
Other useful stuff is explained here: [MAJOR FEAT] New syntax for textual template modes #395
此处解释了其他有用的内容：[MAJOR FEAT] 文本模板模式的新语法 #395
回答by user1075613
Thymeleaf 3-> see yglodt answer
Thymeleaf 3-> 见 yglodt 答案
if you're stuck with Thymeleaf 2and your model attribute is complex (like the case of Maxime Laval), I ended up looping over a script :
如果您坚持使用Thymeleaf 2并且您的模型属性很复杂（例如 Maxime Laval 的情况），我最终会遍历脚本：
<script th:inline="javascript">
var dataLayer = [];
</script>
<script th:each="item:${items}" th:inline="javascript">
dataLayer.push({'attr1':item.attr1, 'attr2':item.attr2, 'attr3':item.attr3});
</script>
<script th:inline="javascript">
console.log(dataLayer); // do whatever you want with dataLayer...
</script>
Not very nice but I couldn't find better for my Google analytics.
不是很好，但我找不到更好的谷歌分析。
回答by Hany Sakr
This works with me in latest version of thymeleaf by adding /*[[${name}]]*/
这在最新版本的百里香叶中适用于我 /*[[${name}]]*/
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var theList = /*[[${modelAttribute}]]*/
for (i = 0; i < theList.length; i++) {
doSomething(theList[i]);
}
/*]]>*/
</script>
回答by RealAugust
Another approach if you are stuck with Thymeleaf 2 is absusing the "th:block"-Element within your Script-Tag
如果您坚持使用 Thymeleaf 2，另一种方法是在 Script-Tag 中滥用“th:block”元素
<script type="text/javascript">
var arrayOfIds= [
<th:block th:each="element: ${list}" th:inline="text">[[${element.Id}]],</th:block>
-1
];
arrayOfIds.pop(); // Remove the superflous last Element
</script>
回答by Ravinath
thymeleaf converts object into javascript variable within the script tag, so can access properties using javascript codes. no need to worry about th:
thymeleaf 将对象转换为脚本标签内的 javascript 变量，因此可以使用 javascript 代码访问属性。无需担心：
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
//the list converts as a javascript object
var availableTypes = /*[[${dataList}]]*/;
console.log(availableTypes);
/*]]>*/
</script>
