본문 바로가기
Web/Javascript

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

by 나비와꽃기린 2016. 9. 28.

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

댓글0