Thymeleaf 将 JSON 字符串作为 JSON 对象打印到 javascript 变量中

Thymeleaf print JSON string as JSON object into a javascript variable

提问by Faraj Farook

In Specific

在特定

I need a way to print JSONrepresentation of a string value into the html page via thymeleaf.

我需要一种JSON通过 thymeleaf 将字符串值的表示形式打印到 html 页面的方法。

In detail

详细

I'm having a model attributewhich contains a string which is actually a string representation of the JSON

我有一个model attribute包含字符串的字符串，它实际上是JSON

My thymeleafcode

我的thymeleaf代码

<script th:inline="javascript">
  var value = [[${data.scriptValue}]];
</script>

print the variable as below

打印变量如下

var value = '[[\"asd\",\"3\"],[\"asd\",\"1\"],[\"asdasd\",\"1\"]]';

But I want something like this as a javascript/JSONarray

但我想要这样的东西作为javascript/JSON数组

var value = [["asd","3"],["asd","1"],["asdasd","1"]];

How to do this in thymeleaf?

如何在百里香中做到这一点？

---

---

Note: I know I can do this from JSON.Parsebut i need a way to do this from thymeleaf :)注意：我知道我可以JSON.Parse从 thymeleaf 中做到这一点，但我需要一种方法来做到这一点 :)

采纳答案by Faraj Farook

Update - 2015/12/24

更新 - 2015/12/24

This feature is available in Thymeleaf 3

此功能在 Thymeleaf 3 中可用

Refer The Thymeleaf textual syntaxin https://github.com/thymeleaf/thymeleaf/issues/395

请参阅The Thymeleaf textual syntax在https://github.com/thymeleaf/thymeleaf/issues/395

// Unescaped (actual answer)
var value = [(${data.scriptValue})];
//or
var value = [# th:utext="${data.scriptValue}"/];

// Escaped
var value = [[${data.scriptValue}]];
//or
var value = [# th:text="${data.scriptValue}"/];

---

---

It's not possible at Thymeleaf 2.As Patric LC mentioned, there are two issues reported for this.

这在 Thymeleaf 2 中是不可能的。正如 Patric LC 所提到的，为此报告了两个问题。

1. unescaped inline for scripts/css #12

2. Use Hymanson for Javascript inlining of JSON #81

1. 未转义的内联脚本/css #12

2. 使用 Hymanson 进行 JSON #81 的 Javascript 内联

回答by m.aibin

@Faraj, new version of Thymeleaf provides this functionality. They implement features for the issues that you mentioned. You can look here: http://www.thymeleaf.org/doc/articles/thymeleaf3migration.html

@Faraj，新版本的 Thymeleaf 提供了此功能。他们为您提到的问题实现了功能。你可以看这里：http: //www.thymeleaf.org/doc/articles/thymeleaf3migration.html

The main features:

主要特点：

• Three textual template modes: TEXT, JAVASCRIPT and CSS.
• New syntax for elements in textual template modes: [# ...] ... [/].
• Inlined output expressions allowed, both escaped ([[...]])and unescaped ([(...)]).
• Intelligent escaping of JavaScript (as literals) and CSS (as identifiers).
• Parser-level (/*[- ... -]*/)and prototype-only (/*[+ ... +]*/)comment blocks.
• Natural templates applied to JAVASCRIPT scripts and CSS style sheets by means of wrapping elements and/or output expressions inside comments (/*[# ...]*/).

• 三种文本模板模式：TEXT、JAVASCRIPT 和 CSS。
• 文本模板模式中元素的新语法：[# ...] ... [/].
• 允许内联输出表达式，包括转义([[...]])和非转义([(...)])。
• JavaScript（作为文字）和 CSS（作为标识符）的智能转义。
• 解析器级(/*[- ... -]*/)和仅限原型的(/*[+ ... +]*/)注释块。
• 通过在注释中包装元素和/或输出表达式，应用于 JAVASCRIPT 脚本和 CSS 样式表的自然模板(/*[# ...]*/)。