mustache 템플릿 문법

Mustache 템플릿 문법을 기반으로 사용되는 모듈들이 있습니다.
최근에 확인한 바로는 grunt, gulp, handlebars 등에서 해당 문법들을 쓰는 경우가 있습니다.
grunt-include-replace-mustache에서 html을 include할 때 사용하는 경우도 있고, gulp에도 sprite handlebar로 Mustache 템플릿 문법을 사용하는 경우도 있습니다.

Tip
이런 mustache 문법을 정리할 때, 지킬과 같은 블로그에선 문법으로 인식하고 컴파일하려는 경향이 있다.
우리는 단순히 string 값으로 입력한건데 멋대로 출력을 바꿔버린다.
이럴 경우 mustache 문법으로 적혀있는 부분을 앞뒤로
이렇게 감싸면된다.

문법

1. 일반적으로 객체 속성에 접근할 때

// 데이터
{
  "name" : "Chris",
  "company" : "<b>Github</b>"
}

// 템플릿과 결과

{{ name }} // Chris
{{ age }} // 아무것도 표시 되지 않음 
{{ company }} // &lt;b&gt;Github&lt;/b&gt;
{{{ company }}} // <b>Github</b>

age 처럼 데이터에 선언되지 않은 변수를 호출하면 아무것도 출력되지 않습니다.
` {{ 괄호 2개 }} ` 를 사용하면 HTML 이스케이프가 되어서 문자열을 출력합니다.
` {{{ 괄호 3개 }}} ` 를 사용하면 이스케이프가 되지 않은 문자열을 그대로 출력합니다.

2. 복잡한 객체 속성에 접근할 때

// 데이터
{
  "name" : "Chris",
  "company" : {
    "name" : "Github",
    "address" : {
      "country" : "USA"
    }
  }
}

// 템플릿과 결과

Country : {{ company.address.country }} // Country : USA

3. 조건문

변수가 값일 경우

 // 데이터
 {
   "person" : false
 }
    
 // 템플릿
 출력이 됩니다.
    
 {{#person}}
   출력이 안됩니다.
 {{/person}}
    
    
 // 결과
 출력이 됩니다.

변수가 객체일 경우

 // 데이터
 {
   "person" : {"name" : "Jo"}
 }
    
 // 템플릿
    
 {{#person}}
   {{name}}
 {{/person}}
    
    
 // 결과
 Jo

섹션 내에서 다른 루트 변수에 접근할 때

 // 문제) person과 같은 수준에 있는 다른 변수가 있고 Google을 출력하려면?
    
 // 데이터
 {
   "person" : {"name" : "Jo"},
   "company" : {"name" : "Google"}
 }
    
 // 템플릿
    
 {{#person}}
   {{name}}의 회사는 {{company.name}}입니다.
 {{/person}}
    
 // 템플릿(Mustache의 확장 구현체인 Handlebars에서 쓸 경우)
 {{#person}}
   {{name}}의 회사는 {{../company.name}}입니다.
 {{/person}}
    
    
 // 결과
 Jo의 회사는 Google입니다.

주석을 사용할 때

    
 // {{! 주석내용 }}
    
 // 템플릿
 <div>문자문자문자문자{{! 여기는 안 나와요 }}</div>
    
 // 결과
 <div>문자문자문자문자</div>

반복문 - 변수의 값이 배열이면 반복문이 됩니다. 빈 배열의 거짓 조건문으로 취급됩니다.

 // 데이터
 {
   "repo" : [
     { "name" : "resque" },
     { "name" : "hub" },
     { "name" : "rip" }
   ]
 }
    
    
 // 템플릿
 {{#repo}}
   <b>{{name}}</b>
 {{/repo}}
    
    
 // 결과
 <b>resque</b>
 <b>hub</b>
 <b>rip</b>

반전 섹션 - 반대되는 조건에서만 출력됩니다.

 // 데이터
 {
   "repo": []
 }
    
    
 // 템플릿
 {{#repo}}
   <b>{{name}}</b>
 {{/repo}}
 {{^repo}}
   저장소가 없습니다
 {{/repo}}
    
    
 // 결과
 저장소가 없습니다

LHJ

mustache 템플릿 문법

문법

1. 일반적으로 객체 속성에 접근할 때

2. 복잡한 객체 속성에 접근할 때

3. 조건문