Thymeleaf特點（3）- 指派

這次我們學習給屬性指派或修改值。

給任何屬性指派 th:attr

現在有一個訂閱服務用來推送網站更新消息，并且可通過 /localhost:8080/subscribe 連結跳轉到訂閱界面進行訂閱。主要有一個表單來擷取訂閱的郵件。

<form action="subscribe.html">
	<fieldset>
		<input type="text" name="email" />
        <input type="submit" value="subscribe!" />
	</fieldset>
</form>
           

action 屬性指定了 subscribe 模闆本身，“subscribe!” 會顯示在按鈕上。如果訂閱的人看不懂英文，或者不希望發送表單資料到 subscribe.html 上，這就一點都不友善了！

通過 th:attr 動态的給屬性指派，再建立對應的控制器和配置檔案就行！

<form action="subscribe.html" th:attr="action=@{/subscribe}">
	<fieldset>
		<input type="text" name="email" />
		<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
	</fieldset>
</form>
           

th:attr 還可以動态的給多個屬性指派，不同屬性之間用逗号隔開。

<img src="../../images/gtvglogo.png"
	 th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
           

此時有聰明的小夥伴可能會提出疑問，我直接用 th:* 的格式對特定的屬性進行指派不更友善嗎？Thymeleaf 官方也同意你的想法，且給出了例子：

這裡有大量像這樣的屬性，每一種都針對一個 HTML5 的屬性：

th:abbr	th:accept	th:accept-charset	th:accesskey	th:action
th:align	th:alt	th:acrchive	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:onseeking	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:xmlspace

之前講到了用 th:attr 給多個屬性指派

<img src="../../images/gtvglogo.png"
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
           

我們再來看看怎麼用表格中的文法完成指派

<img src="../../images/gtvglogo.png"
     th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
           

接下來用更簡潔的方法 (th:alt-title)

<img src="../../images/gtvglogo.png"
     th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />
           

th:alt-title 是一個相當特殊的文法，和它一樣特殊的還有 th:lang-xmllang ，它們可以同時給兩個屬性指派：

th:alt-title 同時給 alt 和 title 指派；

th:lang-xmllang 同時給 lang 和 xml:lang 指派。

到現在為止，學到的動态指派的方法都是直接将原值覆寫掉，不過 Thylemeaf 官方還提供了附加值的方法：

th:attrappend（在現有值後面附加） 和 th:attrprepend（在現有值前附加） 屬性。

如果一個網頁的渲染需要使用者提前選擇樣式，那代碼就可以這麼寫：

<input type="button" value="Do it!" class="btn"
       th:attrappend="class=${' ' + cssStyle}" />
           

當使用者選擇了 cssStyle=warning 的樣式，這份代碼就相當于：

附加值的方法同樣提供了針對某一個 HTML5 屬性的屬性：

th:classappend 和 th:styleappend 屬性。 給 class 屬性值後附加值就可以這樣寫：

<tr th:each="prod : ${prods}" class="row"
    th:classappend="${prodStat.odd}? 'odd'">
           

固定值布爾屬性

倘若使用者在訂閱網站的更新消息時需要勾選是否有 英文名、中文名，普通的做法是建立三個複選框或單選框：

<p>
    <input type="checkbox" name="isenname" />是否有英文名
</p>
<p>
    <input type="checkbox" name="iscnname" />是否有中文名
</p>
<p>
    <input type="checkbox" name="isname" />是否佚名
</p>
           

然後由使用者自行選擇。

但是使用者在網站新增賬號時就已經提供了相關資訊，名字都已記錄在資料庫中，我們是否可以先去資料庫中查詢相關資訊，再預先幫使用者選擇呢？完全可以。

<p>
	<input type="checkbox" name="isenname" th:checked="${user.enname}" />是否有英文名
</p>
<p>
    <input type="checkbox" name="iscnname" th:checked="${user.cnname}" />是否有中文名
</p>
<p>
    <input type="checkbox" name="isname" th:checked="${user.nname}" />是否佚名
</p>
           

如果沒有名字，user.nname 值為 true ，th:check 屬性的值為 true 或不為 null 或 是非零數字 時，浏覽器都會預先勾選上選擇框（即設定成固定值）；否則，值為 false 或為 null 或為 0 或為 off 或為 no 時 ，不會勾選。 （除了 0 和 null ，其它都可被單引号圍住）

固定值布爾屬性還有：

th:async	th:autofocus	th:autoplay
th:checked	th:controls
th:declare	th:default	th:defer	th:disabled
th:formnovalidate
th:hidden
th:ismap
th:loop
th:multiple
th:novalidate	th:nowrap
th:open
th:pubdate
th:readonly	th:required	th:reversed
th:scoped	th:seamless	th:selected

可以承包任何屬性值的 th:whatever

th:whatever 可以被設定成任何屬性值，即使沒有通過 th:* 指定具體的屬性。

最後：要完成屬性指派或修改值的操作，同樣可以用 HTML5 的文法：data-th-* ，或者用 W3C 規範的 th-* ，這些文法在将來都不會被 th:* 取代。

— 【參考資料 —— Thymeleaf文檔20181029 - 29 October 2018】

已同步更新至個人部落格：田超傑的個人網站-一個傳播計算機知識和人生哲理的部落格