[템플릿 엔진] mustache 기본 문법

mustache 기본 문법 정리하기

복잡하지 않으므로 공부 및 연습해 본다!

공식페이지..를 번역한 블로그를 보고 공부했습니다.

1. 변수

{{, }} 사이에 변수명을 입력한다.

• 문자열은 자동 HTML 이스케이프 된다.
• 이스케이프 Escape란? 특정 문자를 HTML로 변환하는 행위. (제로초 참고)
• 이스케이프되지 않은 문자열을 출력하려면 {{{, }}}을 사용한다.

데이터

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

템플릿

{{name}}
{{age}}
{{company}}
{{{company}}}

결과

Chris

<b>Github</b>
<b>Github</b>

1-1. 복잡한 객체

: 객체 안에 객체가 포함되어 있을 때는 점 문법(dot-syntax)을 사용한다.

데이터

{
  "name" : "Chris",
  "company" : {
    "name" : "Github",
    "address" : {
      "country" : "USA"
    }
  }
}

템플릿

Country : {{company.address.country}}

결과

Country : USA

2. 섹션 (반복문, 조건문)

섹션section은 {{#변수명}} 으로 시작하고 {{/변수명}}으로 끝난다.

섹션은 주어진 값에 따라 조건문 / 반복문으로 사용된다.

• 변수가 배열이면 반복문으로 사용됨.
• 변수가 배열이 아니면 조건문으로 사용됨.
  • 0, false, 빈 문자열은 거짓으로 판단하며 섹션 내용이 출력되지 않는다.
  • 배열이라도 빈 배열은 거짓 조건문으로 취급하며 섹션 내용이 출력되지 않는다.

2-1. 섹션 - 조건문

데이터

{
  "person" : false
}

템플릿

출력됩니다.
{{#person}}
  출력안됩니다.
{{/person}}

결과

출력됩니다.

변수가 객체일 때는 섹션 변수의 속성을 변수처럼 사용 가능.

데이터

{
  "person" : {"name" : "Jon"}
}

템플릿

{{#person}}
  {{name}}
{{/person}}

결과

Jon

섹션 내에서 같은 수준에 있는 다른 변수에 접근할 때

데이터

{
  "person" : {"name" : "Jon"},
  "company" : {"name" : "Google"}
}

회사 이름으로 Google을 출력하기 위해서는 아래와 같이 사용해야 한다.

템플릿

{{#person}}
  {{name}}의 회사는 {{company.name}}입니다.
{{/person}}

결과

Jon의 회사는 Google입니다.

2-2. 섹션 - 반복문

변수의 값이 배열이면 반복문이 된다.

빈 배열은 거짓 조건문으로 취급된다.

데이터

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

템플릿

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

결과

<b>resque</b>
<b>hub</b>
<b>rip</b>

2-3. 반전 섹션

{{^변수명}}으로 시작하고 {{/변수명}}으로 끝난다.

반전 섹션은 섹션과 반대되는 조건에서만 출력되는 블럭이다.

• 섹션에 사용된 적이 없는 변수일 때
• 변수의 값이 false , 0, 빈 문자열일 때
• 변수가 빈 배열일 때

데이터

{
  "repo": []
}

템플릿

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  저장소가 없네요. -_-
{{/repo}}

결과

저장소가 없네요. -_-

주석

{{!로 시작하고, }}로 끝난다.

주석은 템플릿 코드에는 존재하지만 화면에는 출력되지 않는 코드를 작성할 때 사용한다.

템플릿

<h1>Today{{! 여기는 안 나옵니다. }}</h1>

결과

<h1>Today</h1>

부분 템플릿

{{> 파일이름}} 과 같이 사용한다.

부분템플릿(Partials)은 외부 파일을 템플릿의 일부로 불러오는 기능이다.

템플릿1 (base.mustache)

<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

템플릿2 (user.mustache)

<strong>{{name}}</strong>

결과 템플릿

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}

구분자 설정

템플릿 태그 {{ 와 }} 를 잠시 다른 구분자로 바꿀 수 있다.

{{=바꿀여는구분자 바꿀닫는구분자=}}

바꿨던 구분자를 다시 되돌릴 때도 비슷한 방식으로 되돌릴 수 있다.

바꿨던여는구분자={{ }}=바꿨던닫는구분자

템플릿

* {{default_tags}}
{{=<% %>=}}
* <% ERB_스타일_태그 %>
<%={{ }}=%>
* {{ 원래_템플릿_코드 }}