Thymeleaf - 迭代 Javascript 代码中的模型属性答案

【问题标题】：Thymeleaf - Iterating over a model attribute inside Javascript codeThymeleaf - 迭代 Javascript 代码中的模型属性
【发布时间】：2015-04-22 13:43:40
【问题描述】：

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

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

    //need some loops

    /*]]>*/
</script>

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

【问题讨论】：

@sgpalit 假设它包含一个字符串列表。我需要遍历字符串列表并将每个字符串映射到另一个。
你使用JSP吗？
我正在使用 Thymeleaf。
您是否尝试将您的模型解析为JSON 对象？并使用Thymeleaf 进行迭代。我不熟悉Thymeleaf。

标签： javascript spring thymeleaf

【解决方案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>

【讨论】：

因此，如果列表中有很多元素，并且表示一个元素的类包含很多成员，那么即使您只需要检索一个属性，您最终也会得到大量 JavaScript。 .. 如果您的元素中有敏感属性，那也很糟糕，它们会出现在 JavaScript 中。有没有更好的方法来遍历列表并将当前元素保存在本地 Thymeleaf 变量中，如 JSP/JSTL？

【解决方案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

【讨论】：

感谢您提出这个问题 - 我未能让 th:each 内联工作，但我确信这是我对 Thymeleaf 的新手使用。这是一个很好的功能，可以消除@maxime 在接受的答案中的担忧。

【解决方案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 分析工具。

【讨论】：

【解决方案4】：

通过添加/*[[${name}]]*/，这适用于我最新版本的百里香叶

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

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

    /*]]>*/
</script>

【讨论】：

【解决方案5】：

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>

【讨论】：

【解决方案6】：

如果您被 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>

【讨论】：