[JS] Handlebar 템플릿 라이브러리

Handlebar Library

https://cdnjs.com/libraries/handlebars.js/

하나의 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>
Colored by Color Scripter
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>
Colored by Color Scripter
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>
Colored by Color Scripter
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>
Colored by Color Scripter
cs

저작자표시

'Dev > Javascript' 카테고리의 다른 글

[JS] 정규표현식을 이용한 유효성검사 (0)	2018.09.03
[JS] 생성자 패턴 (0)	2018.09.03
[JS] DOM 심화 (1)	2018.07.11
[JS] Javascript 배열, 객체 (0)	2018.07.10
[JS] Javascript 기초정리2 (0)	2018.05.22

SuperM

[JS] Handlebar 템플릿 라이브러리

'Dev > Javascript' 카테고리의 다른 글

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			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

'Dev > Javascript' 카테고리의 다른 글

검색

티스토리툴바