Question

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

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

    //need some loops

    /*]]>*/
</script>

我需要做的是，对脚本中的模型属性使用each次迭代。到目前为止，我无法使用th:each执行此操作。任何帮助表示赞赏。

Answer 1

我猜你需要用双括号包装你的模型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>

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>

其他有用的东西在这里解释：[MAJOR FEAT] New syntax for textual template modes #395

Answer 3

Thymeleaf 3 - ＆gt;见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}]]*/

，这可以在最新版本的百里香中使用

<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将对象转换为script标记内的javascript变量，因此可以使用javascript代码访问属性。无需担心：

     <script type="text/javascript" th:inline="javascript">
                            /*<![CDATA[*/
                            //the list converts as a javascript object
                            var availableTypes = /*[[${dataList}]]*/;
                            console.log(availableTypes);
                            /*]]>*/
     </script>

Answer 6

如果你被Thymeleaf 2困住，另一种方法是在你的脚本标签中滥用“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>

Thymeleaf - 迭代Javascript代码

6 个答案: