티스토리 뷰

WEB 웹/JAVASCRIPT

gem - mustache

KIMSG 2017. 11. 30. 15:55

설치

로컬에서 설치
$ gem install mustache
Gem 파일에서 선언
gem "mustache", "~> 1.0"





사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
    <body onload="loadUser()">
    <div id="target">Loading...</div>
 
    <script id="template" type="x-tmpl-mustache">
        Hello {{ name }}!
    </script>
    <script src="../mustache/mustache.min.js"></script>
    <script>
        function loadUser() {
            var template = $('#template').html();
            Mustache.parse(template);   // optional, speeds up future uses
            var rendered = Mustache.render(template, {name: "Luke"});
            $('#target').html(rendered);
        }
    </script>
    </body>
</html>




데이터


1
2
3
4
{
  "name" : "Chris",
  "company" : "<b>Github</b>"
}

템플릿
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}

결과
* Chris
*
* &lt;b&gt;Github&lt;/b&gt;
* <b>Github</b>
json의 데이터가 false이면 출력이 안됩니다.


변수가 객체라면 다음과 같이 사용할 수 있습니다.
데이터
{
  "person" : {"name" : "Jon"}
}
템플릿
{{#person}}
  {{name}}
{{/person}}

결과
  Jon



1
2
3
4
{
  "person" : {"name" : "Jon"},
  "company" : {"name" : "Google"}
}


템플릿은 다음과 같이 작성했습니다.

1
2
3
{{#person}}
  {{name}}의 회사는 {{???}}입니다.
{{/person}}

위 템플릿이 회사 이름으로 “Google”을 출력하려면 {{???}} 
대신 {{company.name}}을 사용하면 됩니다. 템플릿 코드로 나타내면 다음과 같습니다.

1
2
3
{{#person}}
  {{name}}의 회사는 {{company.name}}입니다.
{{/person}}

하지만 Mustache의 확장 구현체인 Handlebars에서는 다음과 같이 사용하므로 주의가 필요합니다.
1
2
3
{{#person}}
  {{name}}의 회사는 {{../company.name}}입니다.
{{/person}}

Handlebars :  http://handlebarsjs.com/
mustache의 확장형 js







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
<!DOCTYPE HTML>
<html>
    <body onload="loadUser()">
    <div id="target">Loading...</div>
 
    <div id="list">List...</div>
 
    <script id="template" type="x-tmpl-mustache">
        Hello {{ name }}!
 
    </script>
    <script id="templateL" type="x-tmpl-mustache">
        <h1>{{header}}</h1>
        {{#bug}}
        {{/bug}}
 
        {{#items}}
            {{#first}}
                <li><strong>{{name}}</strong></li>
            {{/first}}
            {{#link}}
                <li><a href="{{url}}">{{name}}</a></li>
            {{/link}}
        {{/items}}
 
        {{#empty}}
            <p>The list is empty.</p>
        {{/empty}}
 
    </script>
    <script src="mustache/mustache.min.js"></script>
    <script>
        function loadUser() {
            var template = $('#template').html();
            Mustache.parse(template);   // optional, speeds up future uses
            var rendered = Mustache.render(template, {name: "Luke"});
            $('#target').html(rendered);
            loadList();
        }
        function loadList() {
            var templateL = $('#templateL').html();
            Mustache.parse(templateL);   // optional, speeds up future uses
            var rendered = Mustache.render(templateL, {
                "header": "Colors",
                "items": [
                    {"name": "red", "first": true, "url": "#Red"},
                    {"name": "green", "link": true, "url": "#Green"},
                    {"name": "blue", "link": true, "url": "#Blue"}
                ],
                "empty": false
            });
            $('#list').html(rendered);
        }
    </script>
    </body>
</html>



저작자표시 비영리 동일조건

'WEB 웹 > JAVASCRIPT' 카테고리의 다른 글

크롬 클립보드 복사  (0) 2021.02.28
Magnific Popup  (0) 2017.12.01
ECMAScript6  (0) 2017.11.24
Document (javascript30 - 13)  (0) 2017.11.23
Key Detection (javascript30 - 12)  (0) 2017.11.23
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   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
글 보관함