可能是最全的Thymeleaf参考手册（十二）：内联

最新推荐文章于 2023-10-01 16:57:32 发布

银河架构师

最新推荐文章于 2023-10-01 16:57:32 发布

阅读量587

点赞数 1

分类专栏：前端日积月累

本文链接：https://blog.csdn.net/liuminglei1987/article/details/106563752

版权

日积月累同时被 2 个专栏收录

66 篇文章 8 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

表达式内联

尽管标准方言允许我们使用标记属性来执行几乎所有操作，但是在某些情况下，我们更喜欢直接将表达式写到HTML文本中。例如，我们可能更喜欢这样编写：

<p>Hello, [[${session.user.name}]]!</p>

以代替：

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

在Thymeleaf中，[[...]] 或之间的表达式 [(...)] 被认为是内联表达式，在它们内部，我们可以使用在 th:textor th:utext 属性中也有效的任何类型的表达式。

请注意，尽管 [[...]] 对应于 th:text（即结果将被HTML转义），但 [(...)] 对应于 th:utext 并且将不执行任何HTML转义。因此 msg = 'This is <b>great!</b>'，给定该片段，使用诸如的变量：

<p>The message is "[(${msg})]"</p>

结果将使那些 <b> 标签未转义，因此：

<p>The message is "This is <b>great!</b>"</p>

如果需要转义：

<p>The message is "[[${msg}]]"</p>

结果将转义为HTML：

<p>The message is "This is &lt;b&gt;great!&lt;/b&gt;"</p>

请注意，默认情况下，文本内联在每个标记主体（而不是标签本身）中处于活动状态，因此我们无需执行任何操作即可启用它。

内联与原始模板

如果以这种方式输出文本为标准的其他模板引擎，您可能会问：我们为什么不从一开始就这样做？比所有诸如这些th:text 属性更少的代码！

好吧，要小心，因为尽管您可能会发现内联非常有趣，但是您应该始终记住，当静态打开内联表达式时，它们会逐字显示在HTML文件中，因此您可能无法将它们用作原型设计！

浏览器不使用内联静态显示代码片段的方式之间的区别...

Hello, Sebastian!

如何使用？

Hello, [[${session.user.name}]]!

看，多方便实用！

禁用内联

不过，可以禁用此机制，因为实际上在某些情况下，我们确实希望输出 [[...]] 或者 [(...)] 序列而不将其内容作为表达式处理。为此，我们将使用 th:inline="none"：

<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

这将导致：

<p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

文字内联

文本内联与我们刚刚看到的表达式内联功能非常相似，但实际上增加了更多功能。必须使用明确启用它th:inline="text"。

文本内联不仅使我们能够使用与刚才看到的相同的内联表达式，而且实际上就像在模板模式下处理标签主体一样处理标签主体TEXT，这使我们能够执行基于文本的模板逻辑（不仅是输出表达式）。

关于文本模板模式的内容，在后续章节中将会详细介绍。

JavaScript内联

JavaScript内联允许 <script> 在以 HTML 模板方式处理的模板中更好地集成JavaScript 块。

与文本内联一样，这实际上等同于将脚本内容当作 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代码。当您以静态方式打开模板文件（无需在服务器上执行）时，它将完美执行。

因此，这里提供的是一种制作JavaScript自然模板的方法！

高级内联评估和JavaScript序列化

关于JavaScript内联的重要注意事项是，此表达式求值是智能的，并且不仅限于字符串。Thymeleaf将使用JavaScript语法正确编写以下类型的对象：

Strings
Numbers
Booleans
Arrays
Collections
Maps
Beans (objects with getter and setter methods)

例如，如果我们有以下代码：

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

${session.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库，如果有的话，将使用它。如果没有，它将应用内置的序列化机制，该机制可以满足大多数方案的需求并产生相似的结果（但灵活性较差）。

CSS内联

Thymeleaf还允许在CSS <style> 标签中使用内联，例如：

<style th:inline="css">
  ...
</style>

例如，假设我们将两个变量设置为两个不同的 String 值：

classname = 'main elems'
align = 'center'

我们可以像这样使用它们：

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

结果为：

<style th:inline="css">
    .main\ elems {
      text-align: center;
    }
</style>

请注意，CSS内联也像JavaScript一样具有一定的智能。具体来说，通过转义的表达式（例如）输出的表达式[[${classname}]] 将作为CSS标识符转义。这就是为什么我们 classname = 'main elems' 变成了 main \ elems上面的代码片段。

进阶功能：CSS自然模板

与之前解释JavaScript的方式相同，CSS内联还允许我们的 <style> 标签静态和动态地工作，即通过将内联表达式包装在注释中而成为CSS自然模板。例如：

<style th:inline="css">
    .main\ elems {
      text-align: /*[[${align}]]*/ left;
    }
</style>

回复以下关键字，获取更多资源

笔者开通了个人微信公众号【银河架构师】，分享工作、生活过程中的心得体会，填坑指南，技术感悟等内容，会比博客提前更新，欢迎订阅。

银河架构师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
可能是最全的Thymeleaf参考手册（十二）：内联

表达式内联尽管标准方言允许我们使用标记属性来执行几乎所有操作，但是在某些情况下，我们更喜欢直接将表达式写到HTML文本中。例如，我们可能更喜欢这样编写：<p>Hello, [[${session.user.name}]]!</p>以代替：<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>在Thymeleaf中，[[....
复制链接

扫一扫

专栏目录