Thymeleaf 学习笔记 (5)

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

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

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

1、在 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>

2、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 逻辑判断，敬请期待。

来源：oschina

链接：https://my.oschina.net/u/2765/blog/811726

标签

thymeleaf