官方文檔

JavaScript和CSS模板：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#natural-javascript-and-css-templates

解決方案

Thymeleaf 3.0允許以一般模板的形式開發復雜的JavaScript腳本和CSS樣式表，這些模板既可以作為原型也可以作為工作模板使用。?

JAVASCRIPT模板模式下的另一個示例（greeter.js文件）將作為文本模板進行處理，然后從HTML頁面調用該結果。請注意，這不是<script>?HTML模板中的塊，而是.js單獨作為模板處理的文件：

var greeter = function() {var username = [[${session.user.name}]];[# th:each="salut : ${salutations}"] alert([[${salut}]] + " " + username);[/]};

執行后，其結果可能類似于：

var greeter = function() {var username = "Bertrand \"Crunchy\" Pear";alert("Hello" + " " + username);alert("Ol\u00E1" + " " + username);alert("Hola" + " " + username);};

?JavaScript和CSS內聯提供了將內聯表達式包含在JavaScript / CSS注釋中的可能性，例如：

<span style="color:#333333"><code class="language-javascript">... var username = /*[[${session.user.name}]]*/ "Sebastian Lychee"; ...</code></span>

這是有效的JavaScript，執行后的外觀如下：

<span style="color:#333333"><code class="language-html">... var username = "John Apricot"; ...</code></span>

實際上，可以將這種將內聯表達式包含在注釋中的相同技巧可用于整個文本模式語法：

/*[# th:if="${user.admin}"]*/alert('Welcome admin');/*[/]*/

如果模板是靜態打開的（因為它是100％有效的JavaScript），并且如果用戶是管理員運行模板，則將在上面的代碼中顯示該警報。它等效于：

[# th:if="${user.admin}"]alert('Welcome admin');[/]

實際上是模板解析期間將初始版本轉換為的代碼。

但是請注意，在注釋中包裝元素并不會;像內聯輸出表達式那樣清除它們所在的行（直到找到a為止，一直在右邊）。該行為僅保留給內聯輸出表達式。

參考文章

https://www.oschina.net/question/221134_2278846

總結

以上是生活随笔為你收集整理的Thymeleaf——使用模板动态生成JavaScript脚本文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。