본문 바로가기
Web/Javascript

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

by 나비와꽃기린 2016. 9. 28.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. Mustache

1.1 정의

-동적으로 HTML을 생성해주는 간단한 웹 템플릿 엔진 (logic-less template)

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

-구분자로 사용하는 {,}기호가 콧수염 모양이라 붙여진 이름


1.2 장점 및 단점

1.2.1 장점

(1) 다양한 언어 set을 제공한다.

-지원언어 : Ruby, JavaScript, Python, Erlan, node.js, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, Dart, Haxe, Delphi

(2) 빠른 속도와 성능을 가졌다.


1.2.2 단점

(1) codeless를 지향하기에 코드의 중간 가공에 제약사항이 많다.

(2) 상위를 선택하는 방법이 한정적이다.


1.3 사용방법

(1) cdn 혹은 mustache.js를 참조시킨다.

mustache.min.js


(2) mustache가 사용하는 type임을 text/x-mustache 명칭으로 주고

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

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

(3) template를 해석한다.

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

(4) data를 해석한 template에 랜더링하여 html을 생성한다.

var html = Mustache.render(template, data)

(5) 원하는 부분에 html 템플릿을 그려준다.


1.4 사용예제

1.4.1 예제(1)

-변수는 {{변수}}에 대입, 특수문자나 이스케이프 되지 않은 문자열을 출력하고자 할때는 {{{변수}}}를 사용한다.

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

	var template = $('#some-template').html();
	var data = {
		    firstName: "gildong",
		    lastName: "hong",
		    blogURL: "http://mustache"
		};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
<h1>{{firstName}} {{lastName}}</h1>
Blog: {{blogURL}}
</script>
</body>

1.4.2 예제(2)

1개의 배열을 루팡할때는 {{.}}를 사용한다

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

	var template = $('#some-template').html();
	var data = {name: "John Smith", skills: ['JavaScript', 'PHP', 'Java']};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
{{name}} skills:
	<ul>
	{{#skills}}
		<li>{{.}}</li>
	{{/skills}}
	</ul>
</script>
</body>

1.4.3 예제(3)

{{#}} {{/}} 로 감싸진 HTML 태그는 변수이름의 배열 길이만큼 반복된다.

감싸진 부분 안에는 주입된 데이터의 KEY값과 맞는 DATA가 바인딩된다.

변수가 배열이 아니라면 조건문으로 인식된다. 

혹, 변수가 빈 배열이라면 거짓 조건문과 같이 해석된다.

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

	var template = $('#some-template').html();
	var data = {
		    employees: [
		    		    {   firstName: "Christophe",
		    		        lastName: "Coenraets"},
		    		    {   firstName: "John",
		    		        lastName: "Smith"}
		    		    ]};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
Employees:<ul>
		    {{#employees}}
		      <li>{{firstName}} {{lastName}}</li>
		    {{/employees}}
          </ul>
</script>
</body>

1.4.4 예제(4)

. 로 data에 접근할 수 있다.

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

	var template = $('#some-template').html();
	var data = {
		    firstName: "Christophe",
		    lastName: "Coenraets",
		    blogURL: "http://coenraets.org",
		    manager : {
		        firstName: "John",
		        lastName: "Smith"
		    }
		};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
<h1>{{firstName}} {{lastName}}</h1>
  <p>{{blogURL}}</p>
   Manager: {{manager.firstName}} {{manager.lastName}}
</script>
</body>

1.4.5 예제(5)

예제(3)에서 변수가 배열이 아니라면 조건문으로 인식된다고 했다.

employees라는 배열을 루팡을 돌리는데, fullTime 데이타 요소가 배열이 아니기 때문에 조건문으로 인식하게 된다. 두번째 요소의 fullTime값이 false이기 때문에

John의 phone은 출력이 되지 않는다.

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

	var template = $('#some-template').html();
	var data = {
		    employees: [
		    		    {   firstName: "Christophe",
		    		        lastName: "Coenraets",
		    		        fullTime: true,
		    		        phone: "617-123-4567"
		    		    },
		    		    {   firstName: "John",
		    		        lastName: "Smith",
		    		        fullTime: false,
		    		        phone: "617-987-6543"
		    		    },
		    		    {   firstName: "Lisa",
		    		        lastName: "Jones",
		    		        fullTime: true,
		    		        phone: "617-111-2323"
		    		    },
		    		    ]};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
Employees:
<ul>
{{#employees}}
	<li>{{firstName}} {{lastName}}
		{{#fullTime}} 
       		{{phone}}
   		{{/fullTime}}
	</li>
{{/employees}}
</ul>
</script>
</body>

위와 같이 마지막 purple 뒤에는 , 가 붙지 않게 된다.

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

	var template = $('#some-template').html();
	var data = {
			  "items": [
			            {"name": "red", "comma": true},
			            {"name": "green", "comma": true},
			            {"name": "blue","comma": true},
			            {"name": "yellow","comma": true},
			            {"name": "purple","comma": false}
			          ]
			        };
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
{{#items}}
	{{name}}
	{{#comma}},{{/comma}}
{{/items}}
</script>
</body>

1.4.6 예제(6)

{{#변수}}가 null , undefined, false, empty list ..면 자동으로 실행되지 않는다.

{{^변수}}는 null, undefined, flase, empty list .. 면 실행된다.

다음 예제에서는 No item 이 출력된다.

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

	var template = $('#some-template').html();
	var data = {
			  "item": []
	};
	
	var html = Mustache.render(template, data);
	$("#content").append(html);
		
});
</script>
</head>

<body>
<!-- 템플릿이 그려질 부분 -->
<div id="content"></div>

<!-- mustache template -->
<script type="text/x-mustache" id="some-template">
{{#item}}<b>{{name}}</b>{{/item}}
{{^item}} No item {{/item}}
</script>
</body>


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

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

[Javascript] 전달된 파라미터/arguments  (0) 2016.09.30
[Javascript template]자바스크립트 템플릿 엔진/handlebars/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] opener/부모창과 자식창의 데이터 교환/부모창/자식창/예제  (0) 2016.09.01

관련글

티스토리툴바