Thymeleaf 教程

内联 JavaScript

内联 JavaScript 允许在 HTML 模板模式下处理的模板中更好地集成 JavaScript 的 <script> 标签。

与内联文本一样,这实际上相当于在 JAVASCRIPT 模板模式下将脚本内容当作模板来处理,因此文本(TEXT)模板模式的所有功能都将触手可及。然而,在本节中,我们将重点讨论,如何使用它将 Thymeleaf 表达式的输出添加到我们的 JavaScript 块中。

注意,此模式必须使用 th:inline="javascript" 显式启用:

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

这将导致如下输出:

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

在上面的代码中,有两件重要的事情需要注意。

首先,内联 JavaScript 不仅会输出所需的文本,而且还会用引号将其括起来,并对其内容进行 JavaScript 转义,这样表达式的结果就会作为一个格式良好的 JavaScript 字面内容输出。

其次,这种情况的发生是因为我们在输出 ${session.user.name} 表达式时进行了转义,也就是使用了双括号表达式 [[${session.user.name}]]。如果我们使用非转义表达式,比如。

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

输出结果如下:

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

…这是错误的 JavaScript 代码。但是,如果我们通过附加内联表达式来构建脚本的一部分,那么输出一些未转义的内容可能是我们所需要的,所以这个工具有时还是需要的。

JavaScript自然模板

所提到的 JavaScript 内联机制的智能性远远超过了应用 JavaScript 特定的转义和将表达式的结果输出为有效的字面符号。

例如,我们可以用 JavaScript 注释来包装我们的(转义的)内联表达式,比如。

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

Thymeleaf 将忽略我们在注释之后和分号之前所写的所有内容(在本例中为 'Gertrud Kiwifruit'),因此执行此语句的结果将与不使用包装注释时完全相同:

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

但是再仔细看看原始模板代码:

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

请注意,这是一段有效的 JavaScript 代码。当您以静态方式打开模板文件时(无需在服务器上执行),它将完美地执行。变量 username 的值为 “Gertrud Kiwifruit
”。

因此,我们这里有了一种来制作 JavaScript 自然模板的方法!

高级内联计算和 JavaScript 序列化

关于 JavaScript 内联需要注意的一件重要事情是,该表达式计算是智能的,并且不限于字符串。Thymeleaf 将正确地用 JavaScript 语法编写以下类型的对象:

  • Strings 字符串类型

  • Numbers 数字类型

  • Booleans 布尔类型

  • Arrays 数组类型

  • Collections 集合类型

  • Maps Ma类型

  • Beans(对象拥有 getter 和 setter 方法)

例如,如果我们有以下代码:

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

该 ${ession.user} 表达式的计算结果为 User 对象,而 Thymeleaf 将正确地将其转换为 JavaScript 语法:

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

完成此 JavaScript 序列化的方式是通过 org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer 接口的实现,该接口可以在模板引擎使用的 StandardDialect 实例中进行配置。

该 JS 序列化机制的默认实现将在类路径中查找 Jackson 库,如果存在,将使用它。如果不存在,它将应用一种内置的序列化机制,该机制可以满足大多数场景的需求,并产生类似的结果(但灵活性较低)。

说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号