핸들바 (Handlebars)

- 스크립트 내에서 html을 용이하게 작성할 수 있는 템플릿 엔진이다.

- 코드의 재사용 및 유지 보수성을 향상시키며 jQuery와 같은 라이브러리와 함께 사용할 수 있다.

#사용법

1. handlebars 라이브러리 로드

- <head>태그 안, 제이쿼리 cdn 아래에 해당 코드를 작성한다

 

2. 템플릿 정의

-핸들바를 사용할 곳에 <script> 태그로 템플릿을 넣어준다 (type이 핸들바 템플릿으로 정해져 있음)

<script id="temp" type="text/x-handlebars-template"> 
<script id="temp" type="text/x-handlebars-template">
    <tr class="title">
        <td width="100">id</td>
        <td width="100">비밀번호</td>
        <td width="100">이름</td>
        <td width="100">직업</td>
        <td width="100">성별</td>
        <td width="300">취미</td>
        <td width="200">삭제/수정</td>
    </tr>
    {{#each .}}
    <tr class="row">
        <td>{{id}}</td>
        <td>{{pass}}</td>
        <td>{{name}}</td>
        <td>{{job}}</td>
        <td>{{gender}}</td>
        <td>{{hobby}}</td>
        <td>
            <button class="button del">삭제</button>
            <button class="button update">수정</button>
        </td>
    </tr>
    {{/each}} <!--마감태그-->
</script>

 

- 핸들바 안에서의 반복문은 {{#each}}를 사용하며.(마침표)를 입력 시 전체를 반복한다는 의미이다.

- 스크립트 내 배열 값을 가져올 때는 {{키네임}}으로 작성한다. (배열 키와 동일하게 넣어줌)

- 반복문의 마감태그는 {{each}}

** {{키네임}} 으로 감싸진 부분이 주입되는 데이터와 바인딩되는 부분이다.

** {{#each}} {{/each}} 사이에는 배열과 같은 타입의 데이터 길이가 들어와 길이만큼 작업을 반복 수행한다.

 

<script>

var users = [
        {id:'red',pass:'pass1',name:'홍길동',job:'프로그래머',gender:'남',hobby:['게임','영화감상','운동']},
        {id:'yellow',pass:'pass2',name:'심청이',job:'선생님',gender:'여',hobby:['춤','운동']},
        {id:'pink',pass:'pass3',name:'둘리',job:'개그맨',gender:'남',hobby:['게임','그림']},
    ];

list();

function list(){
        var temp = Handlebars.compile($("#temp").html());
        $("#list").html(temp(users));
 }

3. 데이터 정의

- 스크립트에서 목록출력을 위한 샘플데이터를 배열로 만들어 users에 담아둔다.

 

4. 템플릿 컴파일 & 렌더링

핸들바 템플릿 가져오기 var source = $("#temp").html();
핸들바 템플릿 컴파일 var temp = Handlebars.compile(source);
- 위 코드와 같이 source를 바로 대입해서 사용해도 된다.
템플릿 html에 삽입 $("#list).html(temp(users));

- html에서 script태그를 이용해 만든 템플릿(#temp)을 선택해서 핸들바를 컴파일한 뒤 temp변수에 담아준다.

- 템플릿에서 만든 temp의 users를 list에 넣어 출력한다.

** 아래 스크립트에서 만든 users와 핸들바를 이용해 반복해 만든 객체가 동일해야 한다. (배열 키 개수와 이름)

'FE > javascript(jQuery)' 카테고리의 다른 글

JQuery 게시판 페이지 (핸들바, ajax의 json데이터 사용, 벡틱 기호 ``)  (0) 2023.02.11
JQuery의 $.Ajax메소드 사용법 및 Json데이터  (0) 2023.02.08
JavaScript (JQuery) 이용한 주소 관리 프로그램 [등록/삭제]  (0) 2023.02.03
JavaScript Bingo game source code - 자바스크립트 빙고게임 코드  (0) 2022.12.31
JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기)  (0) 2022.12.31

티스토리툴바