mustache의 사용법 간단 정리

이번 포스팅에서는 mustache의 간단한 사용법에 대해서 정리해보고자 한다.

 

mustache란?

---

 다양한 언어를 합쳐서 사용할 수 있는 템플릿 엔진이다. Loop와 같은 로직 구문이 존재하지 않으므로, Logic-Less Templates라고 불린다.

 태그의 기법이 {{hoge}}와 같이 되어 있어 '{'가 수염처럼 보이기때문에 mustache(수염)이라고 하는 것 같다.

1) 매뉴얼 문서

mustache.github.io/mustache.5.html

2) Demo

이러한 작성법이 있었던가라는 생각이 들때 간단히 확인할 수 있는 링크이다. 

www.elated.com/res/File/articles/development/easy-html-templates-with-mustache/demo.html

 

 

mustache기법

---

1) Variables

(1) {{key}}

key로 받은 값으로 치환한다.

// 템플릿
Hello, {{name}} !!

// 전달된 값
{
    "name":"Madoka"
}

// 결과
Hello, Madoka!!

(2) {{{key}}}

key로 받은 값을 HTML에스케이프 하지 않고 치환한다.

// テンプレート
Hello, {{{name}}}!!

// 전달된 값
{
    "name":"<b>Madoka</b>"
}

// 결과
Hello, <b>Madoka</b>!!

만약 {{key}}를 사용할 경우 아래와 같은 결과가 된다.

// 템플릿
Hello, {{name}}!!

// 전달된 값
{
    "name":"<b>Madoka</b>"
}

// 결과
Hello, &lt;b&gt;Madoka&lt;/b&gt!!

 

2) Section

(1) {{#key}} ~ {{/key}}

key로 받은 값이 false가 아니고 빈 List가 아닌 경우에 #key 와 /key 사이에 적힌 내용이 유효하게 된다.

// 템플릿
{{#isMadoka}}
kawaii
{{/isMadoka}}

// 전달된 값
{
    "isMadoka": true
}

// 결과
kawaii

① key로 받은 값이 List인 경우

key로 받은 값이 비어이지 않은 List의 경우는 List의 안에 있는 요소들이 열거된다.

// 템플릿
{{#girls}}
{{name}}
{{/girls}}

// 전달된 값
{
    "girls": [
        {"name":"Madoka"},
        {"name":"Homura"},
        {"name":"Sayaka"},
        {"name":"Mami"},
        {"name":"Kyoko"},
    ]
}

// 결과
Madoka
Homura
Sayaka
Mami
Kyoko

전달된 값에 "name"의 다양한 key를 특별히 준비하지 않고 값을 열거하고 싶은 경우에는 아래와 같이 템플릿을 준비하여 값을 표시하도록 할 수 있다.

// 템플릿
{{#girls}}
{{.}}
{{/girls}}

// 전달된 값
{
    "girls": [
        "Madoka",
        "Homura",
        "Sayaka",
        "Mami",
        "Kyoko",
    ]
}

// 결과
Madoka
Homura
Sayaka
Mami
Kyoko

② key로 받은 값이 callable인 경우

 key로 받은 값이 callable(함수나 람다식)의 경우, 아래와 같이 작성된다. 필터나 캐시를 만들고 싶을 때에 이용하면 좋을 것이다.

// 템플릿
{{#wrapped}}
    {{name}} Saikyo
{{/wrapped}}

// 전달된 값
{
    "name":"Madoka",
    "wrapped": function(text, render) {
        return "卍 " + render(text) + " 卍"
    }
}


// 결과
卍 Madoka Saikyo 卍

text에는 Madoka Saikyo와 같이 name을 치환한 후에 텍스트가 입력된다. render(text)를 하는 것으로 작성해준다. render(text)를 호출하지 않으면 아무것도 쓰여지지 않는다는 것을 주의하길 바란다.

(2) {{#key?}} ~ {{/key?}}

받은 값이 false도 List도 아닌때에 #key와 /key 사이에 적혀 있는 내용이 유효가 된다.

// 템플릿
{{#isMadoka?}}
Hi, {{name}}!!
{{/isMadoka?}}

// 전달된 값
{
    "isMadoka?":{"name":"Madoka"}
}

// 결과
Hi, Madoka!!

 

3) Invert Sections

{{^key}} ~ {{/key}}

key로 얻은 값이 false 혹은 빈 List인 경우 ^key와 /key 사이에 적힌 내용이 유효가 된다.

// 템플릿
{{^key}}
／人◕ ‿‿ ◕人＼
{{/key}}
{{^key}}
Yeaaaaaaaaaaaaaaaaaaah!!!!!!
{{/key}}


// 전달된 값
{
    "isQb":false
}


// 결과
Yeaaaaaaaaaaaaaaaaaaah!!!!!!

 

4) Comments

{{! hoge }}

커맨드로 처리되어 hoge의 부분에 적혀 있는 내용은 무시된다.

// 템플릿
Madoka is a {{! magical}} girl.

// 전달된 값（따로 없음） 

// 결과
Madoka is a girl.

 

5) Partials

{{> fileName}}

실행시에 태그 부분이 fileName으로 지정된 다른 mastache 파일의 내용으로 치환된다. Patials을 사용할 때는 참고가 무한 루프가 되지 않도록 주의하자.

// madoka.mustache템플릿
Madoka, Homura, Sayaka, {{> mami}}, Kyoko

// mami.mustache템플릿
卍 Mami 卍

// 전달된 값（따로 없음）

// 결과
Madoka, Homura, Sayaka, 卍 Mami 卍, Kyoko

 

6) Set Delimiter

mustache에서 일반적으로 태그의 머리가 '{{', 꼬리가 '}}'로 되어 있으나, 유저 독자적으로 변환하여 사용할 수 있다.

// 일반적인 형식
{{name}}

// 여기서 부터erb형식의 태그
{{=<% %>=}}

// 이 주변은erb형식의 태그를 사용해 다양한 것을 한다
<% name %>

// 여기까지가 erb형식
<%={{ }}=%>

// 다시 일반적인 형식으로 돌아옴
{{name}}

---

참고자료

github.com/janl/mustache.js/

github.com/janl/mustache.js/releases

qiita.com/sengok/items/1d958348215647a5eaf0