White Life Story

jQuery Html Template 사용하기 본문

Develop/Javascript

jQuery Html Template 사용하기

새내기 whitelife 2014.11.03 05:35

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



사용을 위해서 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 를 사용하면 개발이 유연해지는 모습을 볼 수 있기 때문에, 시간도 단축 된다. 라이브러리 사용이 가능한 환경이라면 적용 해 보자.


0 Comments
댓글쓰기 폼