jquery.hTmpl v1.4 (엣치 템플=html Templating)

 

jquery.hTmpl-1.4.js

0.00MB

1. HISTORY

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

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

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

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

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

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

1.7. jquery.hTmpl v1.4 (hidongh.tistory.com/9)
html escape 처리후 치환용 식별자 추가 정의. {{=key}}

2. 사용 예제

2.1. 작성 예시

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

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

$.each(data, function(i, obj) {
// data가 다건이 아니면 [data]로 배열화 시킬 수 있음(단건 data도 each 함수에서 필터링 처리할 경우)
  obj.disp_month = obj.key_month + " <월>";
  $("#select_render").append( $("#select_tmpl").hTmpl(obj) );
});
</script>

2.2. 실행 결과

<!-- 실행 결과 -->
<select id="select_render">
  <option>기준월을 선택하세요.</option>
  <option value="11">11 &lt;월&gt;</option>
  <option value="12">12 &lt;월&gt;</option>
</select>
<script id="select_tmpl" type="text/tmpl">
  <option value="{{key_month}}">{{=disp_month}}</option>
</script>