thymeleaf中的内联 --[ [.... ] ]--

最近在使用 springboot 框架，其中关于页面展示的技术，官方推荐使用 thymeleaf ，即然官方建议，那就开始用起来，走起！

thymeleaf模板引擎为前端数据的获取提供了较大的便利，在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，在通过controller，获取到后台model数据时，怎么把返回的数据获到到，并当成一个参数传递给js的一些方法呢？

折腾了好久，终于找到了方法-----------------内联！

一.文本内联

[[…]]    --记住这个符号

之间的表达式在Thymeleaf被认为是内联表达式,在其中您可以使用任何类型的表达式,也会有效th:text属性。

<span>Hello, [[${session.user.name}]]!</span>

等同于：

<span>Hello, <span th:text="${session.username}">username</span>!</span>

记得在使用内联标签的标签内加上 th:inline="text"

如：

<div th:inline="text">timestamp:[[${timestamp}]]</div>

或者在父类以及祖先类上加上

th:inline="text",切记加上，这样才能激活内联标签

二.脚本内联

　　Thymeleaf提供一系列的“脚本”的内联模式功能,这样你就可以将你的数据在脚本中创建一些脚本语言。

我们可以做的第一件事,写脚本内联表达式的值到我们的脚本。

<script th:inline="javascript">
    var user = [[${user.username}]];
    alert(user);
</script>

<script th:inline="javascript">
    var msg  = 'Hello, ' + [[${user.username}]];
    alert(msg);
</script>

只有加入th:inline="javascript"在js代码中才能使用  -  [ [  ] ]

 

实例如下：

通过内联的方法，将数据传给onclick的方法中，做为参数进行处理。