when I actually use it, it"s not what the documentation says.
my thymeleaf version
code calls the tostring method of the class in this way
<script>
console.log([[${games}]])
</script>
chorme console: an error will be prompted, but the content will still be displayed, but cannot be used directly
(index): 16 Uncaught ReferenceError: Game is not defined
at (index):16
(anonymous) @ (index): 16
console.log ([Game [id=1, name=game, contents= [Content [id=1, text=h], Game [id=2, name=game, contents= [Content [id=2, text=h], Game [id=3, name=game, contents= [Content [id=3, text=h], Game [id=4, name=game, contents= [Content [id=4, text=h2], Content [id=5, text=null], Game [id=5, name=game, contents= [Content [id=6, text=h1], Content [id=7, text=h2])
< hr >add th:inline= "javascript", so that jackson is used to json the data
Code
<script th:inline="javascript">
console.log([[${games}]])
</script>
chorme console: content is displayed, but cannot be used directly
console.log([{"id":1,"name":"hahagame","contents":
[{"id": 1, "text": "h"]}, {"id": 2, "name": "game", "contents":
[{"id": 2, "text": "h"}]}, {"id": 3, "name": "game", "contents": [{"id": 3, "text": "h"]}, {"id": 4, "name": "game", "contents": "text": "h2"}, {"id": 5, "text": null}]}, {"id": 5, "name": "game", "contents": [{"id": 6, "text": "h1"}, {"id": 7, "text": "h2"}]})
(5) [{}, {}, {}, {}, {}]
0
:
{id: 1, name: "hahagame", contents: Array(1)}
1
:
{id: 2, name: "hahagame", contents: Array(1)}
2
:
{id: 3, name: "hahagame", contents: Array(1)}
3
:
{id: 4, name: "hahagame", contents: Array(2)}
4
:
{id: 5, name: "hahagame", contents: Array(2)}
length
:
5
__proto__
:
Array(0)
< hr >
with double quotation marks, no error will be reported, so the tostring method of the class is called
Code
<script>
console.log("[[${games}]]")
</script>
chorme console: content is displayed, but cannot be used directly
console.log ("[Game [id=1, name=game, contents= [Content [id=1, text=h], Game [id=2, name=game, contents= [Content [id=2, text=h], Game [id=3, name=game, contents= [Content [id=3, text=h], Game [id=4, name=game, contents= [Content [id=4, text=h2], Content [id=5, text=null], Game [id=5, name=game, contents= [Content [id=6, text=h1], Content [id=7, text=h2]")
< hr >below is my own article for reference
some changes and features in Thymeleaf 3
th:inline="text" HTMLXML
HTML5
Thymeleaf 3 :HTMLXMLTEXTJAVASCRIPTCSSRAW
ThymeleafCSSJavascriptCSSJavascript;
Thymeleaf:
[-sharp th:each="item : ${items}"]
- [-sharp th:utext="${item}" /]
[/]
var a = [-sharp th:text="${msg}"/];
:
This product is called [[${product.name}]] and it"s great!
var a = [[${msg}]];