Recycle Templating JS - v2.1 (데이터 참조 문법 확장)

recycle_tmpl-2.1.js

0.01MB

1. 개요
1.1. 재활용 가능한 템플릿팅을 추구하는 Recycle Templating v2.1 JavaScript 유틸리티를 소개합니다.
1.2. 이전 버전( recycle_tmpl-2.0 )의 기본 템플릿 문법에서 데이터 참조 문법이 확장되었습니다.
1.3. 데이터 참조 문법 확장의 주요내용은 다음과 같습니다.
- 치환 문법과 분기 문법에 사용되던 dot(.) 기호 방식을 JavaScript 표현식으로 확장하였습니다.

2. 데이터 참조 문법
2.1. 치환 문법
- {{ key }} : "dataObj.key" 표현식의 값으로 해당 영역이 치환됩니다.
- {{ subObj.key }} : "dataObj.subObj.key" 표현식의 값으로 해당 영역이 치환됩니다.
- {{ subObj[0] }} : "dataObj.subObj[0]" 표현식의 값으로 해당 영역이 치환됩니다.
- {{= key }} : "dataObj.key" 표현식의 값을 HTML escape 처리한 값으로 해당 영역이 치환됩니다.
2.2. 분기 문법
- {{ if/ key }} : if 블록의 시작. ("dataObj[key]" 표현식의 값을 JavaScript true/false로 평가)
- {{ ifNot/ key }} : ifNot 블록의 시작.
- {{ /if }} : if 혹은 ifNot 블록의 종료.
- {{ if/ key == 'case1' }} : " dataObj.key == 'case1' " 표현식을 JavaScript true/false로 평가
2.3. 하위 호환성
- 내부적으로 표현식 앞쪽에 dataObj 수식어(o.)를 붙혀서 참조합니다.(아래 2가지는 예외)
- 빈문자 key 표현 : dataObj[""] 값이 유효하면 해당 값으로 참조합니다. 예) {{ }}
- #문자 key 표현 : dataObj["#"] 값이 유효하면 해당 값으로 참조합니다. 예) {{ # }}
- dot 기호의 배열 참조는 호환 불가 : JavaScript 표현식으로 컨버전 필요. 예) {{ subObj.0 }} ==> {{ subObj[0] }}

3. 예제

See the Pen Recycle Templating JS - v2.1 (데이터 참조 문법 확장) by hd8131 (@hd8131) on CodePen.