jQuery Html Template 사용하기

Web Application View 는 보통 Html 을 사용한다. Dom 객체를 필요에 따라 생성 할때 유용한 라이브러리를 소개 한다.

• Github: https://github.com/BorisMoore/jquery-tmpl

사용을 위해서 jquery.tmpl.js, jquery.tmplPlus.js 파일을 /js 폴더에 추가 하자.

<script id="sampleData" type="text/x-jQuery-tmpl">
    <tr>
        <td>{{= sample1}}</td>
        <td>{{= sample2}}</td>
    </tr>
</script>

실제 동적으로 추가할 Template을 작성 한다. 위 내용을 참고 한다.

Template 작성이 완료 되었다면, 실제 코드를 작성 하자.

$('#sampleData').tmpl([{ sample1: 1, sample2: 2 }]).appendTo('body');

Template 객체를 불러 온 후 tmpl(data) 함수를 사용하여 값을 바인딩 한다. 그 후 원하는 부분에 appendTo(target) 하여 적용 하면 된다.

직접 문자열로 생성하여 개발 하거나 객체화하여 추가 할 수 있지만, Template 를 사용하면 개발이 유연해지는 모습을 볼 수 있기 때문에, 시간도 단축 된다. 라이브러리 사용이 가능한 환경이라면 적용 해 보자.