Thymeleaf 学习笔记 (5)

 

相似于 EL 表达式的行内变量在 js 文件中的使用

Thymeleaf 在 js中，能够动态的替换变量的值，支持将一个对象转为 json 对象赋予 js 的变量。同时完美支持静态模式显示和解析时替换变量值。

使用方式：在 script 标签上增长 th:inline="javascript"属性。

一、在 html 之外的其余文本文件中，使用双方括号(下面还有一个双括号里面套圆括号的形式)表达式，这种语法模式是开启的，不须要作任何设置。

 

[[${session.user.name}]] 格式的变量模板处理时会转译的内容，例如转译 html 标签或者是一些文本在字面量中须要转译的符号。
[(${session.user.name})] 格式的变量模板处理时不转译内容，直接将值贴到变量的位置上。

可是若是咱们直接放到文件中的话可能就会在静态页面看的时候就会比较丑，对于html ，咱们能够用一个 span来给一个静态模式下看起来舒服的内容。

 

 

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

ps：在 js 文件中，下面会讲到咱们将会使用注释解决这个问题。

例子：

 

 

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

结果：

 

 

<script th:inline="javascript">
    ...
    var username = "Sebastian \\"Fruity\\" Applejuice";
    ...
</script>

上面的例子中，模板引擎作了两件重要的事情 ，首先不是直接输出了变量的内容，它还自动添加了双引号，让这个 js 最终的结果保证了语法上没有错误。其次，字符串中的双引号被自动的转译。

若是将双中括号改成一个中括号一个圆括号，那么将不会自动增长双引号和转译变量中的特殊字符。

为了保证在静态的浏览模式下能够正常查看，可使用 js 的普通注释将变量注释起来，而后在注释外加入一个静态的值，例以下面这个样子：

 

 

<script th:inline="javascript">
    ...
    var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    ...
</script>

二、js 中Thymeleaf 不只能处理 String 类型的变量，并且同时也能处理其余常见类型：

 

 

• Strings


• Numbers


• Booleans


• Arrays


• Collections


• Maps


• Beans (objects with getter and setter methods)



 
•  

例如咱们放了一个对象给变量：

 

 

<script th:inline="javascript">
    ...
    var user = /*[[${session.user}]]*/ null;
    ...
</script>

引擎处理后，将会产生一个 json 对象以下，嗯，底层使用的是 jackson 的库。

 

 

<script th:inline="javascript">
    ...
    var user = {"age":null,"firstName":"John","lastName":"Apricot",
                "name":"John Apricot","nationality":"Antarctica"};
    ...
</script>

下一篇介绍普通文本模式的模板中，如何使用 Thymeleaf 逻辑判断，敬请期待。