handlebar 중첩 데이터 바인딩, @데이터변수

지난번에 간단히 handlebar 라이브러리 사용법을 정리했었다.

▷ 자바스크립트 템플릿 라이브러리 - handlebars

 

 

이전 글에 이어 쓰기엔 너무 길어질 거 같아서 더 공부하게 된 것들(사용해본 것들)은 여기에 새로 정리하려고 한다.

 

 

1. 중첩된 데이터 가져오기

 

1) each 헬퍼 밖의 데이터

만약 템플릿에 바인딩할 데이터가

var data = {
              students: [
                {
                  name: "enai",
                  age: "10"
                },
                {
                  name: "tistory",
                  age: "20"
                }
              ],
              title: "Hello"
            }

이렇고,

Hello enai(10)

Hello tistory(20)

이런 결과를 나타내고 싶다. students가 배열이므로 each 헬퍼를 사용하여 템플릿을 다음과 같이 만든다.

{{#each students}}
{{../title}} {{name}}({{age}})
{{/each}}

 

{{#each}} {{/each}} 안의 데이터는 {{ }} 속의 데이터를 each 헬퍼 옆에 적힌 데이터 안에서 찾는다.

title의 경우엔 students 안에 없기 때문에 {{title}}이라고 하면 원하는 값을 찾지 못한다.

../ 는 헬퍼가 호출한 데이터의 상위 데이터를 말한다. (상대 경로, 헬퍼 블록에 따라 ../ 가 가리키는 값이 달라질 수 있다.)

예시 데이터에선 students의 상위 데이터는 data이다. 그래서 {{../title}}은 data.title을 가져올 수 있다.

 

※참고: 모든 헬퍼에 ../ 가 필요한 건 아니다. #if 헬퍼에선 ../ 없이 데이터를 가져온다.

 

2) 중첩된 JSON 데이터 가져오기

{
  board:{
    title: "handlebar",
    contents: "guide"
}

아래는 위 예제 데이터의 title과 contents를 보여주는 템플릿이다.

{{board.title}} {{board.contents}}

이처럼 템플릿에서 JSON 데이터 안의 JSON 데이터는 . 으로 호출한다.

/ 를 사용할 수도 있다.

{{board/title}} {{board/contents}}

 

 

3) 헬퍼와 이름이 겹치는 데이터 가져오기

만약 커스텀 헬퍼로 name을 등록했는데, 가져올 데이터의 키 값도 name인 경우,

키 값이 name인 데이터는 다음과 같이 템플릿을 만들어 가져온다.

{{./name}}
{{this/name}}
{{this.name}}

 

 

 

 

2. @데이터 변수

 

@데이터 변수란 앞에 @가 붙은 데이터 변수를 말한다. handlebars의 내장 헬퍼에 의해 구현된다.

 

1) @first

{{#each array}}
  {{#if @first}}
    First
  {{/if}}
{{/each}}

each 헬퍼(반복문) 데이터의 첫번째 데이터만 true로 가져온다.

여러 데이터 중 첫번째 데이터만 바인딩할 때 쓰면 되겠다.

 

2) @last

{{#each array}}
  {{#if @last}}
    Last
  {{/if}}
{{/each}}

@first와 반대로 each 헬퍼 데이터의 마지막 데이터만 true 반환.

마지막 데이터만 바인딩해야할 때 쓰면 되겠다.

 

3) @index

@index도 each헬퍼에서 쓰인다.

{{#each array}}
  {{@index}}
{{/each}}

each 헬퍼의 index 값을 가져온다. 0부터 시작한다.

for문의 index 값처럼 생각하면 되겠다.

 

4) @key

{{#each array}}
  {{@key}}
{{/each}}

each 헬퍼로 읽히는 현재 데이터의 키 값을 가져온다.

 

5) @root

템플릿이 실행된 초기 컨텍스트를 가리킨다.

{{#each array}}
  {{@root.foo}}
{{/each}}

 

 

 

 

출처)

handlebarjs