티스토리 뷰
- MUSTACHE MANUAL
머스타치 문법의 사용 방법은 아래 사이트를 통해 예제를 참고할 수 있다.
https://mustache.github.io/mustache.5.html
mustache(5) - Logic-less templates.
mustache(5) Mustache Manual mustache(5) NAME mustache - Logic-less templates. SYNOPSIS A typical Mustache template: Hello {{name}} You have just won {{value}} dollars! {{#in_ca}} Well, {{taxed_value}} dollars, after taxes. {{/in_ca}} Given the following ha
mustache.github.io
{{ mustache }}
Logic-less templates. Available in Ruby, JavaScript, Python, Erlang, Elixir, PHP, Perl, Perl6, Objective-C, Java, C#/.NET, Android, C++, CFEngine, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure[Script], Fantom, CoffeeScript, D, Haskell, XQuery, ASP
mustache.github.io
- 기본 문법
데이터
|
1
2
3
4
|
{
"name" : "ABBO",
"company" : "<b>Tistory</b>"
}
|
cs |
템플릿
|
1
2
3
4
|
* ABBO
*
* <b>Tistory</b>
* <b>Tistory</b>
|
cs |
birth에 대한 변수는 없으므로 아무런 값도 표시되지 않는다.
{{company}}는 이스케이프 된 HTML언어가 표시되며, {{{company}}}는 이스케이프가 되지 않은 문자열이 표시된다.
- SECTION 문법
SECTION 문법은 조건문이나 반복문 대신 사용된다.
주어진 값에 따라 조건문이나 반복문으로 사용되는데, {{#변수명}}으로 시작하고 {{/변수명}}으로 끝난다.
변수가 배열이면 반복문으로, 그렇지 않으면 조건문으로 사용된다.
단, 0이나 false, 빈 문자열은 거짓으로 평가되므로 내용이 출력되지 않는다.
조건문
|
1
2
3
|
{
"sessionUser" : ABBO
}
|
cs |
템플릿
|
1
2
3
4
5
6
|
{{^sessionUser}}
<a href="/users/loginForm" class="navbar-brand">로그인</a>
{{/sessionUser}}
{{#sessionUser}}
<a href="/users/logout" class="navbar-brand">로그아웃</a>
{{/sessionUser}}
|
cs |
결과
|
1
2
3
4
5
|
sessionUser 객체가 있을 경우
로그아웃
sessionUser 객체가 없을 경우
로그인
|
cs |
- 반복문
변수의 값이 배열로 되어 있으면 반복문이 된다.
다만, 앞서 설명한 내용대로 빈 배열은 거짓 조건문으로 취급된다.
데이터
|
1
2
3
4
5
6
7
|
{
"user" : [
{ "name" : "Mike" },
{ "name" : "Alsa" },
{ "name" : "Silly" }
]
}
|
cs |
템플릿
|
1
2
3
|
{{#user}}
{{name}}
{{/user}}
|
cs |
결과
|
1
2
3
|
Mike
Alsa
silly
|
cs |
- 그 외
주석: {{ ! 내용 }} 으로 사용하면 출력이 되지 않는다.
'Client' 카테고리의 다른 글
| [TypeScript] BlockChain 만들기 (1) (0) | 2020.01.04 |
|---|---|
| [TypeScript] 블록체인을 만들 수 있을까? (0) | 2020.01.04 |
| [TypeScript] TypeScript에 대해 알아보자 (0) | 2020.01.04 |
| 자주 쓰는 자바스크립트 정규식 (0) | 2019.12.13 |
| 자바스크립트 코딩 테스트 (3) | 2019.11.21 |
| 자바스크립트 변수 타입 (2) | 2019.10.14 |