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的方法中，做爲參數進行處理。