Mustache

mustache란 

{{ }} 의 형태로 이루어진 탬플릿엔진이다.

{{의 모양이 수염처럼 생겼다고해서 (진짜 극 핵 노잼) 붙여진 이름인데 다양한 언어들을 지원한다.(c, java, ruby...)

 

잠깐, Template Engin 이란

흔히 알고있는 jstl 도 여기에 속하는데, 프로그램 로직과 프리젠테이션의 계층을 분리하기위한 수단이라고 한다. 

쉬운 말로 스프링을 한다 치면 컨트롤러에서 model.setAttribute해서 view로 dto를 보낼때 view에서 받아야하는데, 페이지구성은 똑같고 값만 다른데 굳이 뷰를 또 만들어야해?! 라는 의문점을 해소시켜주는게 템플릿엔진.

템플릿엔진으로 html을 이용해서 다 짜놓고 해당 파일을 첨부만 해주고 파라메터 변수명을 넣어주기만 하면 되는것!

 

템플릿엔진중에서 mustache는 logic-less를 지양하는데, 예를들면 jstl은 <c:Foreach item.. 등의 문법을 사용하여 로직을 짜지만 mustache는 뷰는 뷰의 역할에만 충실하기를 원한다.

 

mustache 예제 (공식문서 발췌)

//Given the following hash:
{
  "name": "Chris",
  "value": 10000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
}

//A typical Mustache template:
Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

//will produce the following:
Hello Chris
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.
{{!이건 주석 표시지롱}}

이런식으로, jstl과 비슷한 사용법이다.

{{! 는 주석표시이다.

 

존재하지 않는 변수명을 썼을때와 {{{ 세개 썼을때

//Template:
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}

//Hash:
{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}

//Output:
* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

변수명이 없으면 아무런 값도 출력되지 않는다.모든 변수는 기본적으로 html로 이스케이프 되는데 {{{, {{&를 사용하여 이스케이프 처리를 막을 수 있다. 

 

리스트

//Template:
{{#repo}}
  <b>{{name}}</b>
{{/repo}}

//Hash:
{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" }
  ]
}

//Output:
<b>resque</b>
<b>hub</b>
<b>rip</b>

{{#변수명}} 으로 시작하고 {{/변수명}} 으로 끝나는 공간을 섹션이라고 하는데 조건문이나 반복문 대신 사용되며

변수가 배열일 경우 반복문으로 사용되고 그렇지않으면 조건문으로 사용된다.

조건문 if 의 결과가 false 혹은 0 혹은 null 일 경우 거짓이므로 섹션의 내용이 출력되지 않는다. 

 

섹션내의 다른루트

{
  "person" : {"name" : "Judy"},
  "drink" : {"name" : "sprite"}
}

{{#color}}
  {{name}}의 음료수는 {{company.name}}입니다.
{{/color}}

//output
Judy의 음료수는 sprite 입니다.

{{# }} 섹션의 첫시작에 변수명 A를 넣었지만 다른변수의 값을 넣고 싶을 때에는 변수명B.변수명 으로 접근가능하다.

 

참,거짓값 or 빈 리스트 Empty List

//Hash:
{
  "person": false
}

//Template:
Shown.
{{#person}}
  Never shown!
{{/person}}

//Output:
Shown.

false이면 {{#와 {{/사이에 아무것도 나타나지 않는다.

만약 아무것도 없었을때 특정 동작을 하고싶다면 반전섹션을 이용하면 된다.

 

반전섹션

//Template:
Shown.
{{#person}}
  {{name}}
{{/person}}
{{^person}}
  Nothing
{{/person}}

//Hash:
{
  "person": []
}

//Output:
Nothing.

name이라는 가상의 변수를 줘 보았다. 만약 안에 아무것도없으면 {{^ 섹션의 값이 나온다.

 

부분템플릿

//파일 1 base.mustache
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

//파일2 user.mustache
<strong>{{name}}</strong>


//컴퓨터가 인식하는 것
<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}

qㅇ부분템플릿은 외부파일을 템플릿의 일부로 불러올 수 있다.
{{>파일이름}} 으로 호출할수있다.