Thymeleaf特点（3）- 赋值

本文介绍: Thym eleaf允许显示的给属性赋值，也允许从配置文件中读取数据给属性赋值，后一种方式更加灵活也更常用。

给任何属性赋值 t h:a t tr

现在有一个订阅服务用来推送网站更新消息，并且可通过 /local host:8080/subscribe 链接跳转到订阅界面进行订阅。主要有一个表单来获取订阅的邮件。

&lt;form action="subscribe.html"&gt;
	&lt;fieldset&gt;
		&lt;input type="text" name="email" /&gt;
        <input type="submit" value="subscribe!" /&gt;
	</fieldset&gt;
</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 官方也同意你的想法，且给出了例子：

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>

<form action="subscribe.html" th:action="@{/subscribe}">

这里有大量像这样的属性，每一种都针对 一个 HTML5 的属性：

th:abbr	th:ac c ept	th:ac c ept–char set	th:access key	th:action
th:align	th:alt	th:acrc hive	th:audio	th:auto complete
th:axis
th:background	th:bgcolor	th:border
th:cellpad d ing	th:cellspac ing	th:c hal lenge	th:char set	th:cite
th:class	th:class id	th:code base	th:codetype	th:cols
th:col span	th:compact	th:content	th:content edi table	th:context menu
th:data	th:date time	th:dir	th:draggable	th:dropzone
th:enctype
th:for	th:form	th:form action	th:formenctype	th:formmethod
th:form target	th:fragment	th:frame	th:frameborder
th:headers	th:height	th:high	th:href	th:href lang
th:hspace	th:http-equi v	th:icon	th:id	th:in line
th:keytype	th:k ind
th:label	th:lang	th:list	th:longdes c	th:low
th:manifest	th:marginheight	th:margin width	th:max	th:max length
th:media	th:method	th:min
th:name
th:onabort	th:onafterprint	th:onbefore print	th:onbeforeunload	th:onblur
th:on canplay	th:on canplaythrough	th:onc hange	th:onclick	th:on context menu
th:ondblclick	th:ondrag	th:ondragend	th:ondragenter	th:ondragleave
th:ondragover	th:ondragstart	th:ondrop	th:onduratio nchange	th:onemptied
th:onended	th:onerror	th:onfocus	th:onf orm change	th:onforminput
th:onhash change	th:oninput	th:onin val id	th:onkeydown	th:onkey pre ss
th:onkey up	th:onload	th:onloadeddata	th:onloadedmetadata	th:onload start
th:onmessage	th:onmousedown	th:onmousemove	th:onmouse out	th:onmouse over
th:onmouse up	th:onmousewheel	th:onoff line	th:ononline	th:onpause
th:onplay	th:onplaying	th:onp op state	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset	th:onre size	th:onscroll
th:onseeked	th:onseek ing	th:onselect	th:onshow	th:onstalled
th:onstorage	th:onseek ing	th:onsubmit	th:onsuspend	th:ontime update
th:onundo	th:onunload	th:onvolumechange	th:onwait ing	th:optimum
th:pattern	th:placeholder	th:poster	th:preload
th:radio group	th:rel	th:re v	th:rows	th:row span
th:rules
th:sandbox	th:scheme	th:scope	th:scrolling	th:size
th:sizes	th:span	th:spel lcheck	th:src	th:srclang
th:standby	th:start	th:step	th:style	th:summary
th:tab index	th:target	th:title	th:type
th:use map
th:value	th:valuetype	th:vspace
th:width	th:wrap
th:xml base	th:xml lang	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–xml lang ，它们可以同时给两个属性赋值：

th:alt-title 同时给 alt 和 title 赋值；

th:lang–xml lang 同时给 lang 和 xml:lang 赋值。

到现在为止，学到的动态赋值的方法都是直接将原值覆盖掉，不过 Thylemeaf 官方还提供了附加值的方法：

th:attrappend（在现有值后面附加）和 th:attrprepend（在现有值前附加） 属性。

如果一个网页的渲染需要用户提前选择样式，那代码就可以这么写：

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

当用户选择了 cssStyle=warning 的样式，这份代码就相当于：

<input type="button" value="Do it!" class="btn warning" />

附加值的方法同样提供了针对某一个 HTML5 属性的属性：

th:class append 和 th:style append 属性。 给 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:form novalidate
th:hidden
th:ismap
th:loop
th:multiple
th:novalidate	th:nowrap
th:open
th:pubdate
th:readonly	th:requi red	th:reversed
th:scoped	th:seamless	th:selected