thymeleaf设置标签属性

ThymeLeaf模板 ginotang 1739℃ 0评论

使用th:attr设置标签属性

th:attr用于动态设置标签属性的值,这一种需求多见于国际化的时候。在前面的文章中,我们使用过th:text进行国际化,不过,th:text只针对那些拥有文本节点的dom标签,例如div、span、p等等,而没有文本节点的标签(例如表单标签input、button),就可以使用th:attr进行文本的国际化。

使用th:attr国际化表单

例如有一张用户注册的表单,包括用户名,密码,提交按钮,分别使用英文和中文进行国际化。表单的外观如下:

thymeleaf using th-attr

 

HTML代码:

表单中使用了th:attr属性,该属性的值使用message操作符#{}读取自外部文件的内容。

由于span是具有文本节点的dom标签,因此我们可以使用th:text进行国际化设置。而input标签是不具有这个节点的,因此只能使用th:attr。

home_zh_CN.properties文件和home_en.properties文件内容分别是:

设置标签的多个属性值

如果标签具有多个属性值,只需要使用逗号(,)把这些属性分开即可:

由于alt和title的特殊性,它们的作用基本上等价,所以我们常常把它们的内容设置为一样。thymeleaf也考虑到了这一点,因此特别提供了th:alt-title同时设置两者的值:

为特定标签属性设置值

由于th:attr使用起来一点也不优雅,所以thymeleaf提供了很多内置属性来解决这个问题,例如前面我们已经使用过的th:href(用来设置href的属性值)。

还是上面的例子,按钮文本的国际化可以使用th:value来代替th:attr,前者可读性更高。

thymeleaf提供了非常多的属性来简化我们的开发,基本上我们常见的标签属性都有,把它们一个个记起来也不是很现实。幸运的是,thymeleaf可以设置任何属性的值,甚至这是一个不存在的标签属性。

设置任意标签属性值

通过th命名空间,我们可以为标准html标签添加一个不存在的属性值:

解析后html页面显示结果是:

兼容html5标准

实际情况是,th命名空间和html5标准是不兼容的,如果想页面兼容html5,那么可以使用data-th-作为属性的前缀。使用th:text作为例子,html5兼容的代码如下:

 

转载请注明:Pure nonsense » thymeleaf设置标签属性

喜欢 (0)
0 0 投票数
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x
()
x