本文将说明在Thymeleaf中,如何在标记中设置、或修改属性值的方法。
设置任何属性的值
假设有以下模板代码:
<
与Thymeleaf一样,此模板更像是静态原型,而不是Web应用程序的模板。首先,表单中的 action 属性静态链接到模板文件本身,因此没有地方进行有用的URL重写。其次,提交按钮中的 value
输入 th:attr
<
这个概念非常简单:th:attr 只是简单的为一个属性分配值的表达式。创建了相应的控制器和消息文件后,处理该文件的结果将是:
<
除了新的属性值,还可以看到应用程序上下文名称已自动添加为URL前缀,如/gtvg/subscribe。
如果我们想一次设置多个属性怎么办?由于XML规则不允许在标记中设置属性两次,因此 th:attr 将采用逗号分隔的分配列表,例如:
<
给定所需的消息文件,将输出:
<
为特定属性设置值
如前面所述,为属性设置值的做法如下所示:
<
但是,这么做比较繁琐,还难看。不如在其对应属性内设置值直接且方便。况且,这也不是创建模块最优雅的方法。这就是为啥Thymeleaf模板中 th:attr 很少使用的原因。通常都会使用其对应的 th:* 属性,而这些属性的任务就是为特定属性设置值(但不仅仅是像 th:attr 这样的任何属性)。
例如,要设置 value 属性,则使用 th:value:
<
再如:
<
还有很多这样的属性,每个属性都针对特定的HTML5属性。
一次设置多个值
有两个比较特殊的属性 th:alt-title 和 th:lang-xmllang
- th:alt-title 将设置 alt 和 title。
- th:lang-xmllang 将设置 lang 和 xml:lang。
例如:
<
或与其等价的:
<
有了 th:alt-title 属性,则可以很方便的同时设置值:
<
追加和前置
Thymeleaf还提供 th:attrappend 和 th:attrprepend
例如,您可能希望将要添加(未设置,只是添加)的CSS类的名称存储在上下文变量中,因为要使用的特定CSS类将取决于用户所做的操作之前:
<
如果将 cssStyle 变量设置为来处理此模板 "warning",则会得到:
<
标准方言中还有两个特定的附加属性:th:classappend 和 th:styleappend 属性,用于在元素上添加CSS类或样式片段而不覆盖现有属性的值:
<
固定布尔属性值
HTML具有布尔属性的概念,即没有值的属性,并且值为 1 即表示为“ true”。在XHTML中,这些属性仅有一个值,就是它本身。
例如checked:
<
标准方言存在一些属性,这些属性可以通过评估条件来设置这些属性,因此,如果评估为 true,则该属性将设置为其固定值;如果评估为 false,则将不设置该属性:
<
标准方言中存在以下固定值布尔属性:
设置任何属性的值(默认属性处理器)
Thymeleaf提供了一个默认的属性处理器,即使我们在标准方言中没有为其定义任何特定的 th:* 处理器,它也允许我们设置任何属性的值 。
例如:
<
将解析为:
<
有好的支持HTML5属性和元素名
也可以使用完全不同的语法,以更友好的以HTML5方式将处理器应用于模板。
<
data-{prefix}-{name} 是HTML5中标准的自定义属性语法,而无需开发人员使用任何像 th:*
还有一种用于指定自定义标记的语法:{prefix}-{name},它遵循W3C自定义元素规范(更大的W3C Web组件规范的一部分)。例如,这可以用于 th:block 元素(或 th-block),这将在后面的文章中进行说明。
重要提示:此语法是命名空间语法的补充 th:*,它不会替代它。完全没有打算将来弃用命名空间的语法。
我是银河架构师,十年饮冰,难凉热血,愿历尽千帆,归来仍是少年!
如果文章对您有帮助,请举起您的小手,轻轻【三连】,这将是笔者持续创作的动力源泉。当然,如果文章有错误,或者您有任何的意见或建议,请留言。感谢您的阅读!