Handlebar Library
https://cdnjs.com/libraries/handlebars.js/
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
하나의 Json Data가 존재할 경우
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 | <html> <head> <style> li{ list-style: none; } </style> </head> <body> <h1>Template Using Handlebar</h1> <section class="show"></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <script type="myTemplate" id="listTemplate"> <li> <div>게시자 : {{name}}</div> <div class="content">{{content}}</div> <div>좋아요 갯수 <span> {{like}} </span></div> <div class="comment"> <div>{{comment}}</div> </div> </li> </script> <script> var data = { "id" : 88, "name" : "crong", "content" : "새로운글을 올렸어요", "like" : 5, "comment" : "댓글이다" }; var template = document.querySelector("#listTemplate").innerHTML; // pre-compile var bindTemplate = Handlebars.compile(template); var resultHTML = bindTemplate(data); var show = document.querySelector(".show"); show.innerHTML += resultHTML; </script> </body> </html> | cs |
하나의 Json Data에 배열이 존재할 경우
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 | <html> <head> <style> li{ list-style: none; } </style> </head> <body> <h1>Template Using Handlebar</h1> <section class="show"></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <script type="myTemplate" id="listTemplate"> <li> <div>게시자 : {{name}}</div> <div class="content">{{content}}</div> <div>좋아요 갯수 <span> {{like}} </span></div> <div class="comment"> <h3>댓글</h3> {{#each comment}} <div>{{@index}} - {{this}}</div> {{/each}} </div> </li> </script> <script> var data = { "id" : 88, "name" : "crong", "content" : "새로운글을 올렸어요", "like" : 5, "comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"] }; var template = document.querySelector("#listTemplate").innerHTML; // pre-compile var bindTemplate = Handlebars.compile(template); var resultHTML = bindTemplate(data); var show = document.querySelector(".show"); show.innerHTML += resultHTML; </script> </body> </html> | cs |
여러개의 Json Data가 존재할 경우 ( + 조건문이 있을 경우 )
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 | <html> <head> <style> li{ list-style: none; padding: 3%; border-top: 1px solid #cccccc; } </style> </head> <body> <h1>Template Using Handlebar</h1> <section class="show"></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <script type="myTemplate" id="listTemplate"> <li> <div>게시자 : {{name}}</div> <div class="content">{{content}}</div> <div>좋아요 갯수 <span> {{like}} </span></div> <div class="comment"> <h3>댓글</h3> {{#if comment}} {{#each comment}} <div>{{@index}} - {{this}}</div> {{/each}} {{else}} <div>@@@무플@@@</div> {{/if}} </div> </li> </script> <script> var data = [ {"id" : 88, "name" : "crong", "content" : "새로운글을 올렸어요", "like" : 5, "comment" : ["댓글이다", "잘했어요"]}, {"id" : 28, "name" : "hary", "content" : "전 오늘도 노래를 불렀어요", "like" : 0, "comment" : ["제발고만..","듣고싶네요 그노래"]}, {"id" : 23, "name" : "pororo", "content" : "크롱이 항상 말썽을 피워서 행복해~", "like" : 4, "comment" : []}, {"id" : 5, "name" : "pobi", "content" : "물고기를 한마리도 잡지 못하다니..", "like" : 5, "comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"]} ]; var template = document.querySelector("#listTemplate").innerHTML; // pre-compile var bindTemplate = Handlebars.compile(template); var resultHTML = data.reduce(function(prev,next){ return prev + bindTemplate(next); }, ""); var show = document.querySelector(".show"); show.innerHTML += resultHTML; </script> </body> </html> | cs |
Function을 등록하여 사용하는 경우
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 | <html> <head> <style> li{ list-style: none; padding: 3%; border-top: 1px solid #cccccc; } </style> </head> <body> <h1>Template Using Handlebar</h1> <section class="show"></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <script type="myTemplate" id="listTemplate"> <li> <div>게시자 : {{name}}</div> <div class="content">{{content}}</div> {{#likes like}} {{like}} {{/likes}} <div class="comment"> <h3>댓글</h3> {{#if comment}} {{#each comment}} <div>{{@index}} - {{this}}</div> {{/each}} {{else}} <div>@@@무플@@@</div> {{/if}} </div> </li> </script> <script> var data = [ {"id" : 88, "name" : "crong", "content" : "새로운글을 올렸어요", "like" : 5, "comment" : ["댓글이다", "잘했어요"]}, {"id" : 28, "name" : "hary", "content" : "전 오늘도 노래를 불렀어요", "like" : 0, "comment" : ["제발고만..","듣고싶네요 그노래"]}, {"id" : 23, "name" : "pororo", "content" : "크롱이 항상 말썽을 피워서 행복해~", "like" : 4, "comment" : []}, {"id" : 5, "name" : "pobi", "content" : "물고기를 한마리도 잡지 못하다니..", "like" : 5, "comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"]} ]; Handlebars.registerHelper("likes", function(like){ if(like >= 5){ return "<span>좋아요가 5개 이상입니다! (현재 " + like + "개)</span>" }else if(like<1){ return "<span>아직 아무도 좋아요를 누르지 않았어요...</span>"; }else{ return "좋아요가 " + like + "개 입니다!"; } }); var template = document.querySelector("#listTemplate").innerHTML; // pre-compile var bindTemplate = Handlebars.compile(template); var resultHTML = data.reduce(function(prev,next){ return prev + bindTemplate(next); }, ""); var show = document.querySelector(".show"); show.innerHTML += resultHTML; </script> </body> </html> | cs |
