Thymeleaf参考指南
  • Introduction
  • I. 使用Thymeleaf
    • 1 介绍Thymeleaf
      • 1.1 Thymeleaf是什么?
      • 1.2 Thymeleaf能处理什么类型的模版?
      • 1.3 方言:标准方言
    • 2 百里香虚拟杂货店
      • 2.1 杂货店网站
      • 2.2 创建和配置模板引擎
        • 模版解析器
        • 模版引擎
    • 3 使用文本
      • 3.1 多种语言显示欢迎
        • 使用th:text以及外部化文本
        • 上下文
        • 执行模版引擎
      • 3.2 与文本和变量有关的更多内容
        • 非转义文本
        • 使用和显示变量
    • 4 标准表达式语法
      • 4.1 信息
      • 4.2 变量
        • 表达式基本对象
        • 表达式工具对象
        • 重新格式化主页里的日期
      • 4.3 选择变量表达式(星号语法)
      • 4.4 链接URL
        • 主页的菜单栏
        • 服务器根相对路径
      • 4.5 分段
      • 4.6 字面量
        • 文本字面量
        • 数字字面量
        • 布尔字面量
        • null字面量
        • 字面量标记
      • 4.7 文本拼接
      • 4.8 字面量置换
      • 4.9 算术运算
      • 4.10 比较和相等
      • 4.11 条件表达式
      • 4.12 默认表达式(猫王运算符)
      • 4.13 无操作标记
      • 4.15 数据转换/格式化
      • 4.14 预处理
    • 5 设置属性值
      • 5.1 设置任何属性的值
      • 5.2 为指定的属性设置值
      • 5.3 一次设置多个值
      • 5.4 附加与前置
      • 5.5 定值布尔属性
      • 5.6 设置任何属性的值(默认的属性处理器)
      • 5.7 对HTML5友好的属性和元素名的支持
    • 6 遍历
      • 6.1 遍历基础
        • 使用th:each
        • 可遍历值
      • 6.2 保持遍历状态
      • 6.3 通过数据的懒惰检索实现优化
    • 7 条件求值
      • 7.1 简单条件:if与unless
      • 7.2 switch声明
    • 8 模版设计
      • 8.1 包含模版片段
        • 定义和引用片段
        • 片段规范语法
        • 不使用th:fragment引用片段
        • th:insert与th:replace(与th:include)的区别
      • 8.2 参数化片段签名
        • 不带片段参数的片段本地变量
        • th:assert——用于模板内断言
      • 8.3 弹性布局:超越片段插入
        • 使用空片段
        • 使用无操作标记
        • 片段的高级条件插入
      • 8.4 移除模版片段
    • 9 本地变量
    • 10 属性优先级
    • 11 注释与块
      • 11.1. 标准的HTML/XML注释
      • 11.2. Thymeleaf解析器级别注释块
      • 11.3. Thymeleaf原型注释块
      • 11.4. 人造th:block标签
    • 12 内联
      • 12.1. 表达式内联
        • 内联对战自然模版
        • 禁用内联
      • 12.2 文本内联
      • 12.3 JavaScript内联
        • JavaScript自然模版
        • 高级内联求值与JavaScript序列化
      • 12.4 CSS内联
        • 高级特性:CSS自然模版等
    • 13 文本模版模式
      • 13.1 文本语法
        • 转义的元素属性
      • 13.2 扩展性
      • 13.3 文本原型注释块:添加代码
      • 13.4 文本解析器级别注释块:移除代码
      • 13.5 自然JavaScript和CSS模版
    • 14 给我们的杂货店添加更多页面
      • 14.1 订单列表
      • 14.2 订单详情
    • 15 更多配置
      • 15.1 模板解析器
        • 链接模板解析器
      • 15.2 信息解析器
        • 标准信息解析器
        • 配置信息解析器
      • 15.3 转换服务
      • 15.4 日志记录
    • 16 模版缓存
    • 17 解耦的模版逻辑
      • 17.1 解耦的逻辑:概念
      • 17.2 配置解耦的模版
        • 启用解耦的模版
        • 混合耦合的与解耦的逻辑
      • 17.3 th:ref属性
      • 17.4 解耦的模板对性能的影响
      • 17.5 解耦的逻辑的解析
    • 18 附录A:表达基本对象
      • 基本对象
      • 请求或会话属性的网络上下文命名空间等
      • 网络上下文对象
    • 19 附录B:表达实用对象
      • 执行信息
      • 信息
      • URI/URL
      • 转换
      • 日期
      • 日历
      • 数字
      • 字符串
      • 对象
      • 布尔值
      • 数组
      • 列表
      • 集合
      • 映射
      • 合计
      • ID
    • 20 附录C:标记选择器语法
      • 多值类的匹配
Powered by GitBook
On this page

Was this helpful?

  1. I. 使用Thymeleaf
  2. 17 解耦的模版逻辑

17.1 解耦的逻辑:概念

到目前为止,我们都用通常的模版来构建我们的杂货店——以属性的形式将逻辑插入我们的模版。

但是,Thymeleaf也允许我们从它的模版标记中完全解耦逻辑,允许在HTML和XML模版模式下创建完全无逻辑的标记模版。

大意就是将模版逻辑定义在一个分开的逻辑文件里(更准确地说,是一个逻辑资源,因为可以不是一个文件)。默认地,逻辑资源是一个额外的文件,和模版文件在同一个地方(比如,文件夹)。它们名字相同,但是逻辑资源文件的扩展名是.th.xml:

/templates
+->/home.html
+->/home.th.xml

因此,home.html文件可以是完全无逻辑的。看起来就像这样:

<!DOCTYPE html>
<html>
  <body>
    <table id="usersTable">
      <tr>
        <td class="username">Jeremy Grapefruit</td>
        <td class="usertype">Normal User</td>
      </tr>
      <tr>
        <td class="username">Alice Watermelon</td>
        <td class="usertype">Administrator</td>
      </tr>
    </table>
  </body>
</html>

没有任何的Thymeleaf代码。这是一个连没有Thymeleaf或者模板知识的设计者也可以创建、编辑、理解的模板文件。或者,这是一段由某些外部系统提供的没有一点儿Thymeleaf挂钩的HTML。

现在,让我们通过创建额外的home.th.xml文件,把那个home.html模板转变为Thymeleaf模板。就像这样:

<?xml version="1.0"?>
<thlogic>
  <attr sel="#usersTable" th:remove="all-but-first">
    <attr sel="/tr[0]" th:each="user : ${users}">
      <attr sel="td.username" th:text="${user.name}" />
      <attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
    </attr>
  </attr>
</thlogic>

我们可以在thlogic块里面看到许多的<attr>标签。那些<attr>标签在由sel属性指定的原始模板的节点上执行属性注入。它们包含Thymeleaf标记选择器(实际上是AttoParser标记选择器)。

也请注意:<attr>标签可以内嵌,这样它们的选择器可以扩展。比如,上面的sel="/tr[0]",会被当做sel="#usersTable/tr[0]"处理。用于用户名<td>的选择器会被当做sel="#usersTable/tr[0]//td.username"处理。

因此,一旦合并,上面看到的两个文件会等同于:

<!DOCTYPE html>
<html>
  <body>
    <table id="usersTable" th:remove="all-but-first">
      <tr th:each="user : ${users}">
        <td class="username" th:text="${user.name}">Jeremy Grapefruit</td>
        <td class="usertype" th:text="#{|user.type.${user.type}|}">Normal User</td>
      </tr>
      <tr>
        <td class="username">Alice Watermelon</td>
        <td class="usertype">Administrator</td>
      </tr>
    </table>
  </body>
</html>

这看起来更为熟悉,比起创建两个独立的文件,也确实更加简单。但是,解耦的模板的优势在于我们能够给予模板完全的自由。因此,从设计的观点来看,有更好的可维护性。

当然,设计者和开发人员之间还是需要某些协议。比如,用户<table>需要一个id="usersTable"。但是,在许多的场景下,纯HTML模板更易于设计团队与开发团队之间的交流。

Previous17 解耦的模版逻辑Next17.2 配置解耦的模版

Last updated 6 years ago

Was this helpful?