深色模式
5.2 为特定属性赋值
看到这里,你可能会觉得像这样的代码:
html
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>……写起来实在不够优雅。在一个属性的值里嵌套赋值表达式虽然能用,但如果每次设置属性都要这么写,模板的可读性会大打折扣。
Thymeleaf 也考虑到了这一点,这也是为什么 th:attr 在实际模板开发中很少被使用。通常情况下,你会使用另一类 th:* 属性——它们专门用于为特定的 HTML 标签属性赋值(而非像 th:attr 那样适配任意属性)。
比如,要设置 value 属性,直接使用 th:value 即可:
html
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>这样看起来就清爽多了!我们再把表单标签里的 action 属性也改成这种写法:
html
<form action="subscribe.html" th:action="@{/subscribe}">你还记得之前在 home.html 里用过的 th:href 吗?它其实就是同一类属性:
html
<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>这类“专用属性修饰符”的数量非常多,每一个都对应一个特定的 HTML5 属性,以下是完整列表:
| th:abbr | th:accept | th:accept-charset |
| th:accesskey | th:action | th:align |
| th:alt | th:archive | th:audio |
| th:autocomplete | th:axis | th:background |
| th:bgcolor | th:border | th:cellpadding |
| th:cellspacing | th:challenge | th:charset |
| th:cite | th:class | th:classid |
| th:codebase | th:codetype | th:cols |
| th:colspan | th:compact | th:content |
| th:contenteditable | th:contextmenu | th:data |
| th:datetime | th:dir | th:draggable |
| th:dropzone | th:enctype | th:for |
| th:form | th:formaction | th:formenctype |
| th:formmethod | th:formtarget | th:fragment |
| th:frame | th:frameborder | th:headers |
| th:height | th:high | th:href |
| th:hreflang | th:hspace | th:http-equiv |
| th:icon | th:id | th:inline |
| th:keytype | th:kind | th:label |
| th:lang | th:list | th:longdesc |
| th:low | th:manifest | th:marginheight |
| th:marginwidth | th:max | th:maxlength |
| th:media | th:method | th:min |
| th:name | th:onabort | th:onafterprint |
| th:onbeforeprint | th:onbeforeunload | th:onblur |
| th:oncanplay | th:oncanplaythrough | th:onchange |
| th:onclick | th:oncontextmenu | th:ondblclick |
| th:ondrag | th:ondragend | th:ondragenter |
| th:ondragleave | th:ondragover | th:ondragstart |
| th:ondrop | th:ondurationchange | th:onemptied |
| th:onended | th:onerror | th:onfocus |
| th:onformchange | th:onforminput | th:onhashchange |
| th:oninput | th:oninvalid | th:onkeydown |
| th:onkeypress | th:onkeyup | th:onload |
| th:onloadeddata | th:onloadedmetadata | th:onloadstart |
| th:onmessage | th:onmousedown | th:onmousemove |
| th:onmouseout | th:onmouseover | th:onmouseup |
| th:onmousewheel | th:onoffline | th:ononline |
| th:onpause | th:onplay | th:onplaying |
| th:onpopstate | th:onprogress | th:onratechange |
| th:onreadystatechange | th:onredo | th:onreset |
| th:onresize | th:onscroll | th:onseeked |
| th:onseeking | th:onselect | th:onshow |
| th:onstalled | th:onstorage | th:onsubmit |
| th:onsuspend | th:ontimeupdate | th:onundo |
| th:onunload | th:onvolumechange | th:onwaiting |
| th:optimum | th:pattern | th:placeholder |
| th:poster | th:preload | th:radiogroup |
| th:rel | th:rev | th:rows |
| th:rowspan | th:rules | th:sandbox |
| th:scheme | th:scope | th:scrolling |
| th:size | th:sizes | th:span |
| th:spellcheck | th:src | th:srclang |
| th:standby | th:start | th:step |
| th:style | th:summary | th:tabindex |
| th:target | th:title | th:type |
| th:usemap | th:value | th:valuetype |
| th:vspace | th:width | th:wrap |
| th:xmlbase | th:xmllang | th:xmlspacev |
总结
th:attr虽能设置任意属性,但写法冗余不优雅,仅在无专用修饰符时使用;- Thymeleaf 为几乎所有 HTML5 原生属性提供了对应的
th:*专用修饰符(如th:value、th:action、th:href),是日常开发的首选; - 专用属性修饰符语法更简洁,直接通过
th:属性名赋值,无需嵌套表达式,提升模板可读性。
