[Javascript template]자바스크립트 템플릿 엔진/handlebars/template engine/웹템플릿/예제/example

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. Handlebars

1.1 정의

-mustache 템플릿 언어 기반으로 만들어진 확장 템플릿

-동적으로 HTML을 생성해주는 logic less 템플릿 엔진이다.

-view와 code를 분리하기 위해 만들어졌다. 로직과 presentation의 분리.

-자바스크립트 코드 안에 html element를 넣지 않기 위해 사용한다.

1.2 장점 및 단점

1.2.1 장점

(1) 자바 스크립트 파일의 비지니스 로직에서 템플릿을 분리하여 HTML 페이지를 유지한다.

(2) 애플리케이션의 구조를 개선한다 (유지 보수 및 확장 용이)

(3) precompile 할 수 있기때문에 성능개선에 도움을 준다.

(4) 빠르다. 참고url >> https://travis-ci.org/wycats/handlebars.js/builds/33392182#L538

(5) 컴파일된 템플릿에 모델을 반영하여 뷰를 구성하는데, 모델을 한번 뷰에 반영하고는 끝이기 때문에 초기 랜더링 속도면에서 유리하다.

1.2.2 단점

(1) 이미 랜더링 된 뷰의 내용을 바꾸고 해당 내용을 다시 모델에 반영하려면 별도의 작업이 필요하다.

1.3 사용방법 / 작동방법

1.3.1 작동방법

1. 템플릿을 해석한 후, 함수로 컴파일한다.

2. 이 함수가 다음 인수로 JSON 객체를 전달하여 실행한다.

3. 함수는 템플릿의 변수들을 변환하여 html 데이터를 반환한다.

1.3.2 사용방법

1. cdn 혹은 handlerbars.js를 참조시킨다.

handlebars-v4.0.5.js

2. handlebar.js 가 사용하는 type임을 x-handlebars-template 명칭으로 준다.

3. handlebar가 해석할 타켓으로 주입해주기 위한 아이디값을 설정해준다.

<script id="some-template" type="text/x-handlebars-template">

4. template를 해석한다.

var source = $("#some-template").html(); var template = Handlebars.compile(source);

5.template에 data를 주입하여 UI를 동적으로 생성해준다.

$('body').append(template(data));

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>

<html>
<head>
<script LANGUAGE="JavaScript">
$(document).ready(function(){
        //템플릿 해석
	var source = $("#some-template").html(); 
	var template = Handlebars.compile(source); 
        //서버에서 Data를 가져왔다고 가정
	var data = { 
	    users: [ { 
	        person: {
	            firstName: "Garry", 
	            lastName: "Finch"
	        },
	        jobTitle: "Front End Technical Lead",
	        twitter: "gazraa" 
	    }, {
	        person: {
	            firstName: "Garry", 
	            lastName: "Finch"
	        }, 
	        jobTitle: "Photographer",
	        twitter: "photobasics"
	    }, {
	        person: {
	            firstName: "Garry", 
	            lastName: "Finch"
	        }, 
	        jobTitle: "LEGO Geek",
	        twitter: "minifigures"
	    } ]
	}; 

	Handlebars.registerHelper('fullName', function(person) {
	  return person.firstName + " " + person.lastName;
	});
        //해당 selector에 결과를 렌더링
	$('body').append(template(data));
		
});
</script>
</head>

<body>
	<h1>Handlebars JS Example</h1>
        <script id="some-template" type="text/x-handlebars-template">
	<table>
    <thead> 
        <th>Name</th> 
        <th>Job Title</th> 
        <th>Twitter</th> 
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{fullName person}}</td> 
            <td>{{jobTitle}}</td> 
            <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td> 
        </tr> 
        {{/users}} 

    </tbody> 
	</table> 
	</script>
</body>
</html>

1.4 사용방법 예제

그럼, 더 상세히 예제를 보면서 이해해보도록 하자.

1.4.1 예제(1) _ {{#변수}}

Mustache와 동일하게 데이타 변수는 {{}}에 대입하며,

{{#변수}} ~ {{/}} 로 변수가 배열이면 배열 갯수만큼 돌아가며 출력을, 배열이 아니라면 조건문으로 인식한다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);
	  console.log(template);
	  var data = { users: [
	      {username: "dowon", firstName: "Yun", lastName: "Dowon", email: "dowon@test.com" },
	      {username: "youngsik", firstName: "Yun", lastName: "YoungSik", email: "ysyun@test.com" },
	      {username: "bokja", firstName: "KingWanJJang", lastName: "HaHa", email: "haha@test.com" }
	    ]};
	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	  <table>
	    <thead>
	      <th>Username</th>
	      <th>Real Name</th>
	      <th>Email</th>
	    </thead>
	    <tbody>
	      {{#users}}
	        <tr>
	          <td>{{username}}</td>
	          <td>{{firstName}} {{lastName}}</td>
	          <td>{{email}}</td>
	        </tr>
	      {{/users}}
	    </tbody>
	  </table>
	</script>

</body>

1.4.2 예제(2) _ {{#if}}

위에서 {{변수}}가 배열이 아니라면 조건문으로 인식이 된다고 했다.

조건문으로 인식 될때는 변수가 false,undefined, null, "", 0, or [] 라면 실행되지 않는다. 하지만 handlebars에서는 {{#if}}섹션으로 조건문을 대체하여 사용하는 것이 좋다.

변수값이 조건을 true로 만족시키지 못하면 No content가 출력된다.

{{people.length}} 찍으면 3 이 출력된다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);
	  var data = {
			  people: [
			           "Yehuda Katz",
			           "Alan Johnson",
			           "Charles Jolley"
			         ]
			       };

	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	 
 		{{#if people}}
 		 <p>{{people}}</p>
			{{else}}
  			<p class="empty">No content</p>
		{{/if}}
	</script>

</body>

if의 반대로 {{#unless}가 있다.

if는 조건변수가 true라면 실행되지만 unless는 조건변수가 false여야 실행된다.

현재 people변수는 true이므로 템플릿을 다음과 같이 바꾸면 No content가 출력된다.

{{#unless people}}
     <p>{{people}}</p>
	{{else}}
  	<p class="empty">No content</p>
{{/unless}}

1.4.3 예제(3) _ {{#each}}

{{#each}} ~ {{/each}}를 통해서 for문처럼 돌릴 수 있다.

key값이 되는 people 배열을 직접 서술하여 돌리며 {{this}}를 사용하였다.

{{@key}} 나 {{@index}} 로 index 번호를 출력할 수 있다.

<head>
<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);
	  var data = {
			  people: [
			           "Yehuda Katz",
			           "Alan Johnson",
			           "Charles Jolley"
			         ]
			       };

	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	 
 		{{#each people}}
 		 <p> {{@index}}:{{this}}</p>
			{{else}}
  			<p class="empty">No content</p>
		{{/each}}
	</script>

</body>

key값이 없는 data라면 {{#each .}} 을 사용하여 루팡을 돌릴 수 있다.

<head>
<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);
	  var data = [
	      	    {num:1, title:"홍길동1", userName:"홍길동1"},
	      	    {num:2, title:"홍길동2", userName:"홍길동2"},
	      	    {num:3, title:"홍길동3", userName:"홍길동3"}
	      	    
	      	];

	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	  <ul class="people_list">
 		 {{#each .}}
   		 <li>{{num}} , {{title}} , {{userName}}</li>
  		 {{/each}}
	  </ul>
	</script>

</body>

1.4.4 예제(4) _ {{#with}}

{{#with}}를 사용하여 템플릿에서 context를 이동할 수 있다.

author key값을 as |변수명| 으로 바꿔 사용한다고 규정함으로써 . 로 접근할 수 있다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);
	  var data = {
			  title: "My first post!",
			  author: {
			    firstName: "Charles",
			    lastName: "Jolley"
			  },
			  test: "test!"
			}

	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	 
<div class="entry">
  <h1>{{title}}</h1>

  {{#with author as |myAuthor|}}
  <h2>By {{myAuthor.firstName}} {{myAuthor.lastName}}</h2>
  {{/with}}

	<h1>{{test}}</h1>
</div>
	</script>

</body>

1.4.5 예제(5) _ Parent Path ../

부모 context에 접근하고자 할때 사용한다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

	  var source   = $("#some-template").html();
	  var template = Handlebars.compile(source);

	  
	  var data = {groupName:"Celebrities", users:[{name:{firstName:"Mike", lastName:"Alexander" }}, {name:{firstName:"John", lastName:"Waters" }} ]};

	  $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	 
		{{#users}}
	     <li>{{name.firstName}} {{name.lastName}} is in the {{../groupName}} group.</li>
	     {{/users}}
	</script>

</body>

1.4.6 예제(6) _ registerPartial

개발을 하다보면 몇 가지 다른 상황에서 템플릿 덩어리가 부분적으로 필요할 때가 있다. 그때는 registerPartial을 사용하여 덩어리를 원하는 부분에 붙일 수 있다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

    var template = Handlebars.compile($("#people-template").html());
    Handlebars.registerPartial("person", $("#person-partial").html());
 	
    var data = { people: [
               	      {username: "dowon", firstName: "Yun", lastName: "Dowon", email: "dowon@test.com" },
               	      {username: "youngsik", firstName: "Yun", lastName: "YoungSik", email: "ysyun@test.com" },
               	      {username: "bokja", firstName: "KingWanJJang", lastName: "HaHa", email: "haha@test.com" }
               	    ]};
    
    $("#content-placeholder").html(template(data));
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
<script id="people-template" type="text/x-handlebars-template">
  {{#each people}}
    {{> person}}
  {{/each}}
</script>
 
<script id="person-partial" type="text/x-handlebars-template">
  <div class="person">
    <h2>{{first_name}} {{last_name}}</h2>
    <div class="phone">{{username}}</div>
    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
  </div>
</script>

</body>

1.4.7 예제(7) _ 사용자 정의 헬퍼 (custom function helpers)

로직이 필요할때 사용자 정의 헬퍼를 통해 별도의 function 을 생성하여 사용할 수 있다. 다음 예제에서는 사용자 정의 헬퍼로 정의한 intro 헬퍼에 name값을 인자로 넘겨

사용하고 있다.

<script LANGUAGE="JavaScript">
$(document).ready(function(){

    var source = $("#some-template").html();
    var template = Handlebars.compile(source);
    var data = {
        items:[
        {name: "shoes", price:"15000"},
        {name: "Tshirt", price:"10000"},
        {name: "Jeans", price:"25000"}
        ]
    };
    //custom helper 등록 (name을 인자로 받아서 전체 intro링크를 반환한다.)
    Handlebars.registerHelper('intro', function(name){
        return name + "@naver.com";
    });

    var itemList = template(data);
    $('#content-placeholder').append(itemList);
		
});
</script>
</head>

<body>
	
	<!-- 출력하고자 하는 div -->
	<div id="content-placeholder"></div> 
	
	<!-- handler template -->
	<script id="some-template" type="text/x-handlebars-template">
	 <table>
            <thead>
                <th>제품이름</th>
                <th>가겨</th>
                <th>구매링크</th>
            </thead>
            <tbody>
                {{#items}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{price}}</td>
                    <td><a href="mailto:{{intro name}}">{{intro name}}</a></td>
                </tr>
                {{/items}}
            </tbody>
        </table>
	</script>

</body>

1.4.8 예제(8) _ 주석

{{!}} 나 {{!-- --}}를 사용한다.

{{! data를 출력한다}} 
                {{#items}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{price}}</td>
                    <td><a href="mailto:{{intro name}}">{{intro name}}</a></td>
                </tr>
                {{/items}}

이제 이런 문제가 있는것 같은데....................................

http://www.slideshare.net/OhgyunAhn/java-script-templateengine?qid=8be78b1e-3207-49c6-abca-57c7f703da31&v=&b=&from_search=5

저작자표시 비영리 변경금지

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

[Javascript] javascript uuid / 자바스크립트 UUID 생성 / 랜덤아이디 생성 (0)	2016.10.14
[Javascript] 전달된 파라미터/arguments (0)	2016.09.30
[Javascript template]자바스크립트 템플릿 엔진/Mustache/template engine/웹템플릿/예제/example (0)	2016.09.28
[Javascript template] javascript template engine/자바스크립트 템플릿 엔진/maven test 환경 (0)	2016.09.26
[Javascript] 페이징(paging) 공통 UI 소스 /페이징 화면 소스/페이징 자바스크립트 / paging ui (2)	2016.09.06

나비와꽃기린

[Javascript template]자바스크립트 템플릿 엔진/handlebars/template engine/웹템플릿/예제/example

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

티스토리툴바

[Javascript template]자바스크립트 템플릿 엔진/handlebars/template engine/웹템플릿/예제/example

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

관련글

티스토리툴바