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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <script src="./lib/jquery/1.9.1/jquery.min.js"></script> <script src="./lib/handlebars/4.0.10/handlebars.js"></script> </head> <body> <ul id="testData"> </ul> <script id="template" type="text/x-handlebars-template"> {{#each .}} <li> {{@index}} : {{name}} </li> {{/each}} </script> <script type="text/javascript"> // 배열 반복문 출력 var testData = [ { name : '이소룡'}, { name : '김양용'}, { name : '김성룡'}, { name : '김조조'}, { name : '김나라'} ] var template = Handlebars.compile($('#template').html()); var html = template(testData); $("#testData").append(html); </script> <script id="template" type="text/x-handlebars-template"> // {{name}} 은 {{this.name}} 과 같고 {{.}} 은 현재 name과 key값을 포함하는 오브젝트 {{#each members}} <li> {{@index}} : {{name}} </li> {{/each}} </script> <script type="text/javascript"> // json객체 반복문 출력 var testData = { members : [ { name : '이소룡'}, { name : '김양용'}, { name : '김성룡'}, { name : '김조조'}, { name : '김나라'} ] } var template = Handlebars.compile($('#template').html()); var html = template(testData); $("#testData").append(html); console.log(template); console.log(html); </script> </body> </html> |
반응형
'Handlebars' 카테고리의 다른 글
| [Handlebars] 헬퍼함수 조건문 else 분기 (0) | 2017.06.08 |
|---|---|
| [Handlebars] 헬퍼함수 조건문 처리 (0) | 2017.06.08 |
| [Handlebars] 헬퍼함수 사용 (1) | 2017.06.08 |
