일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- mariadb galera cluster
- mariadb 모든 데이터 삭제
- 쿠키 하루
- mysql galera cluster
- mysql 자동복구
- cookie today
- mysql database truncate
- mysql 사용자 생성
- cookie 하루 저장
- 쿠키 하루 저장
- mysql table 손상
- mysql auto repair
- mysql DB권한
- mysql 손상
- mariadb all table truncate
- 서버 재시작시 mount
- mysql 모든 데이터 삭제
- mysql all table truncate
- mysql database 검사
- docker 설치
- mysql yum 설치
- linux mount 방법
- mysql yum install
- galera cluster 재시작
- mysql recovery
- mysqlcheck
- centos mount
- elasticsearch mapping생성
- 쿠키 오늘
- mysql 검사
- Today
- Total
IT
Handlebar.js 기본 정리 본문
Handlebars.js
<script id="entry-template" type="text/x-handlebars-template">
<table>
<thead>
<th>이름</th>
<th>아이디</th>
<th>메일주소</th>
</thead>
<tbody>
{{#each users}} 또는 {{#users}} --> users안에 있는 배열길이 만큼 도는 루프선언
<tr>
<td>{{name}}</td>
<td>{{id}}</td>
<td><a href="mailto:{{email}}">{{email}}</a></td>
{{#if show}}
{{showItem}}
{{else}} or {{^}}
{{notShowItem}}
{{/if}}
<td>
</tr>
{{/each}} 또는 {{/users}}
</tbody>
</table>
</script>
//핸들바 템플릿에 바인딩할 데이터
var data = {
users: [
{ name: "홍길동1", id: "aaa1", email: "aaa1@gmail.com", show: "true",showItem : "dd", notShowItem : "kk" },
{ name: "홍길동2", id: "aaa2", email: "aaa2@gmail.com" show: "false", showItem : "dd", notShowItem : "kk"},
{ name: "홍길동3", id: "aaa3", email: "aaa3@gmail.com" show: "true", showItem : "dd", notShowItem : "kk" },
{ name: "홍길동4", id: "aaa4", email: "aaa4@gmail.com" show: "false", showItem : "dd", notShowItem : "kk" },
{ name: "홍길동5", id: "aaa5", email: "aaa5@gmail.com" show: "true", showItem : "dd", notShowItem : "kk" }
]
};
//핸들바 템플릿 가져오기
var source = $("#entry-template").html();
//핸들바 템플릿 컴파일
var template = Handlebars.compile(source);
//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
var html = template(data);
//핸들바 {{#if문}}
if문은 true와 false로만 판단됨( if(a == 1) 불가)
if문을 판단하는 object가 true이면
{{showItem}}노출
if문을 판단하는 object가 false이면
{{notShowItem}}
//생성된 HTML을 DOM에 주입
$('body').append(html);
템플릿 설정부분 : <script id="entry-template" type="text/x-handlebars-template">
데이터 바인딩 문법 : {{variable}}
String to Html 표현 렌더링(데이터가 html태그로 표현되어야한다면) : {{{variable}}}
공백제거 문법 : {{~variable}}
'기타 개발 관련' 카테고리의 다른 글
facebook, twitter 공유 og태그 사용예제 (0) | 2020.01.07 |
---|---|
TOMCAT LOG 일자별로 저장 (0) | 2020.01.07 |
BXSLIDER.JS 정리 (0) | 2020.01.07 |
Tomcat 서비스 등록 방법 (0) | 2019.04.02 |
js 파일 캐싱 없이 적용하기 (0) | 2019.02.15 |