[Javascript] Thymeleaf

1. Thymeleaf 기본 표현

자세한 문법은 Thymeleaf 사이트의  튜토리얼을 참고하는게 좋습니다. 

• 기본 표현, 
• 조건문, 
• 반복문

세가지를 중점으로 보겠습니다. 

 

Thymeleaf Document 참고 

(https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax)

• Simple expressions:
• Variable Expressions:  ${...}
• Selection Variable Expressions: *{...}
• Message Expressions:  #{...}
• Link URL Expressions:  @{...}
• Fragment Expressions: ~{...}
• Literals
  • Text literals: 'one text', 'Another one!',…
  • Number literals: 0, 34, 3.0, 12.3,…
  • Boolean literals: true, false
  • Null literal: null
  • Literal tokens: one, sometext, main,…
• Text operations:
  • String concatenation:  +
  • Literal substitutions:  |The name is ${name}|
• Arithmetic operations:
  • Binary operators: +, -, *, /, %
  • Minus sign (unary operator): -
• Boolean operations:
  • Binary operators:  and ,  or
  • Boolean negation (unary operator):  ! ,  not
• Comparisons and equality:
  • Comparators:  > ,  < ,  >= ,  <=  ( gt ,  lt ,  ge ,  le )
  • Equality operators:  == ,  !=  ( eq ,  ne )
• Conditional operators:
  • If-then:  (if) ? (then)
  • If-then-else:  (if) ? (then) : (else)
  • Default:  (value) ?: (defaultvalue)

 

2. 자주 사용하는 문법 및 표현식 예제

표현식 : th:[속성]="서버 전달 받은 값 또는 조건식"

Tag 안에 삽입되면 된다. 

Thymeleaf 3.x 에서는 inline 표현식이 추가되어 html 태그없이 표현이 가능하다. 

[[$user.name]]

 

Title	Description
th:text	텍스트 내용  <span th:text="${user.name}"></span>
th:utext	html 내용 <div th:utext="${content}"></div>
th:value	element value값, checkbox, input 등  <input type="text" th:value="${title}" />
th:with	변수값 지정  <p th:with="authType = ${user.authType}+' Type'" th:text="${authType}"></p>
th:switch th:case	switch-case문 <div th:switch="${user.role}">    <p th:case="'admin'">User is an administrator    <p th:case="#{roles.manager}">User is a manager   </div>
th:if	조건문  <p th:if="${user.authType}=='web'" th:text="${user.authType}"></p>
th:unless	else 표현 <p th:unless="${user.authType}=='facebook'" th:text="'not '+ ${user.authType}"></p>
th:each	반복문 <p th:each="user : ${users}" th:text="${user.name}"></p>

참고

There are quite a lot of attributes like these, each of them targeting a specific HTML5 attribute:

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:xmlspace