jquery.hTmpl v1.3 공개 (엣치 템플 = 간결한 html Templating 추구)

jquery.hTmpl-1.3.js

0.00MB

1. 설계 철학
저는 HTML 영역에 계산, 반복, 변환 등의 로직 노출을 최소화하자는 코드분리 철학을 가지고 있습니다.

2. 초기 버전 (hidongh.tistory.com/4)
웹페이지의 코드 가독성과 개발 생산성 향상을 설계 목표로 JSTL의 forEach 사용을 대체하는
jquery.forEach plugin을 2015년에 공개하였습니다.

3. jquery.tmplEach v1.0 (hidongh.tistory.com/5)
이 후 javascript 템플릿 엔진의 개념이 이미 존재함을 알게 되었고 인지도가 있는 jquery.tmpl plugin을 참고하되, 코드분리 철학은 유지하는 방향으로 jquery.tmplEach plugin을 2016년에 공개하였습니다.

4. jquery.tmplEach v1.1 (hidongh.tistory.com/6)
논문에서 HTML 주석처리로 소개한 개념을 템플릿 엔진의 기능으로 다시 복원.

5. jquery.eachTmpl v1.2 (hidongh.tistory.com/7)
필터링 함수 문법을 jquery each문과 유사하게 재정의하면서 명칭 수정. options 파라미터 추가.

6. jquery.hTmpl v1.3
코드분리 철학에 집중하는 간결한 버전으로 새롭게 정의하면서 명칭 수정. 반복, 필터링 기능 제거.
(주 기능에 속하지 않는 부가 기능은 사용자 정의 로직에서 다루는 것이 적합하다는 판단입니다)
※ hTmlp 함수에는 반복, 필터링 기능이 없으므로 $.each() 함수와 함께 사용할 것을 권장합니다.

7. 아래는 hTmpl 함수의 사용 예제입니다.

<select id="render_select">
  <option>기준월을 선택하세요.</option>
</select>
<script id="tmpl_select" type="text/template">
  <option value="{{key_month}}">{{disp_month}}</option>
</script>

<script type="text/javascript">
var data = [ {"key_month":"11"}, {"key_month":"12"} ];

$.each(data, function(i, item) {
// data가 배열 타입이 아니면 [data] 이런식으로 배열화 시킬 것(each 함수를 필터링 용으로 사용할 경우)
  item.disp_month = item.key_month + "월";
  $("#render_select").append( $("#tmpl_select").hTmpl(item) );
});
</script>

<!-- 실행 결과 -->
<select id="render_select">
  <option>기준월을 선택하세요.</option>
  <option value="11">11월</option>
  <option value="12">12월</option>
</select>
<script id="tmpl_select" type="text/template">
  <option value="{{key_month}}">{{disp_month}}</option>
</script>