thymeleaf不是3.0就支持取消th:inline=“text”属性了么,为什么取消后和取消前还是有差异?

发布于 2022-09-06 22:34:39 字数 3136 浏览 14 评论 0

我在实际使用时,确不是文档上说得那么回事啊
我的thymeleaf版本图片描述

代码 这样调用的是类的tostring方法

<script>
console.log([[${games}]])
</script> 

chorme控制台:会提示出来错误,但是内容还是显示,但是不能直接使用

(index):16 Uncaught ReferenceError: Game is not defined

at (index):16

(anonymous) @ (index):16

console.log([Game [id=1, name=hahagame, contents=[Content [id=1, text=hahah]]], Game [id=2, name=hahagame, contents=[Content [id=2, text=hahah]]], Game [id=3, name=hahagame, contents=[Content [id=3, text=hahah]]], Game [id=4, name=hahagame, contents=[Content [id=4, text=hahah2], Content [id=5, text=null]]], Game [id=5, name=hahagame, contents=[Content [id=6, text=hahah1], Content [id=7, text=hahah2]]]])


加了 th:inline="javascript" ,这样使用的就是jackson对数据进行json处理

代码

<script th:inline="javascript">
    console.log([[${games}]])
</script> 

chorme控制台:内容显示,但是不能直接使用

   console.log([{"id":1,"name":"hahagame","contents":    

[{"id":1,"text":"hahah"}]},{"id":2,"name":"hahagame","contents":
[{"id":2,"text":"hahah"}]},{"id":3,"name":"hahagame","contents": [{"id":3,"text":"hahah"}]},{"id":4,"name":"hahagame","contents":[{"id":4,"text":"hahah2"},{"id":5,"text":null}]},{"id":5,"name":"hahagame","contents":[{"id":6,"text":"hahah1"},{"id":7,"text":"hahah2"}]}])

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


加了双引号,不会报错了,这样调用的是类的tostring方法

代码

<script>
console.log("[[${games}]]")
</script> 

chorme控制台:内容显示,但是不能直接使用

console.log("[Game [id=1, name=hahagame, contents=[Content [id=1, text=hahah]]], Game [id=2, name=hahagame, contents=[Content [id=2, text=hahah]]], Game [id=3, name=hahagame, contents=[Content [id=3, text=hahah]]], Game [id=4, name=hahagame, contents=[Content [id=4, text=hahah2], Content [id=5, text=null]]], Game [id=5, name=hahagame, contents=[Content [id=6, text=hahah1], Content [id=7, text=hahah2]]]]")


下方是我参考的本人的文章

https://segmentfault.com/a/11...

Thymeleaf 3中的一些变化和特性

模板变化
推荐你去掉模板中的 th:inline=“text” 属性。因为在HTML或XML模板中,不再需要该属性去支持文本中内联表达式的特性。

完整的HTML5 标记支持
不在强制要求标签闭合,属性加引号等等

模板类型
    Thymeleaf 3 移除了之前版本的模板类型,新的模板类型为:HTML、XML、TEXT、JAVASCRIPT、CSS、RAW

文本型模板
文本型模板使得Thymeleaf可以支持输出CSS、Javascript和文本文件。在你想要在CSS或Javascript文件中使用服务端的变量时;或者想要输出纯文本的内容时。
在文本模式中使用Thymeleaf的特性,你需要使用一种新的语法,例如:

[# th:each="item : ${items}"]
  - [# th:utext="${item}" /]
[/]
var a = [# th:text="${msg}"/];

增强的内联机制
现在可无需额外的标签,直接在文本中输出数据:

This product is called [[${product.name}]] and it's great!
var a = [[${msg}]];

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文