Thymeleaf

Question

我正在尝试编写一些 Javascript 需要使用模型属性的代码。以下是我如何定义脚本标签：

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    //need some loops

    /*]]>*/
</script>

我需要做的是，对脚本中的模型属性使用 each 迭代。到目前为止，我无法用 th:each 做到这一点。感谢任何帮助。

Answer 1

我想您需要将模型属性用双括号括起来，如下所示：[[${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>

Answer 2

你也可以这样做，我猜这是最紧凑的：

在你的@Controller中：

model.addAttribute("items", new String[] { "item1", "item2", "item3" });

在您的模板中：

<script type="text/javascript" th:inline="javascript">

var items = [];

/*[# th:each="n : ${items}"]*/

items.push("[(${n})]");

/*[/]*/

</script>

这里解释了其他有用的东西：[主要成就] 文本模板模式的新语法 #395

Answer 3

Thymeleaf 3 -> 请参阅 yglodt 答案

如果你坚持使用 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>

不是很好，但我找不到更好的 Google 分析。

Answer 4

通过添加 /*[[${name}]]*/

，我可以在最新版本的 thymeleaf 中使用它

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    var theList = /*[[${modelAttribute}]]*/
    for (i = 0; i < theList.length; i++) {
        doSomething(theList[i]);
    }

    /*]]>*/
</script>

Answer 5

如果您坚持使用 Thymeleaf 2，另一种方法是滥用 Script-Tag

中的 "th:block"-Element

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

Answer 6

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>

Thymeleaf - 在 Javascript 代码中迭代模型属性

Thymeleaf - Iterating over a model attribute inside Javascript code

javascript

spring