Skip to main content

mustache.js – 자바스크립트 템플릿 엔진

자바 스크립트 탬플릿 엔진을 왜 써야하는가에 대한 고찰부터 해봐야할거 같네요.

원페이지 웹 페이지를 개발하다 보면 동적으로 화면을 붙이거나 서버에서 데이터만 가져와서

화면을 구성해야하는 경우가 있습니다.

저도 급할때는 이렇게 합니다만… 다음처럼 스크립트속에 html을 넣어서 원하는 위치에 append 해서 처리합니다. -_-

.... 중략...
var html = "<b>"+name+"</b> is great!! <br>";
html = html + "welcome to " + area;
$("body").append(html);

솔직히 뽀대 안나지 않습니까 -ㅅ-)
동적으로 처리해야 하는 부분이 많다면 소스 자체도 복잡해지고 가독성도 떨어집니다.

그래서 html로 불러다가 붙이는 경우도 있습니다.
html을 ajax으로 불러 화면에 붙이게 되면 속도가 빠른경우는 문제가 되지 않겠지만
페이지가 크다면 페이지를 불러 올때마다 로드가 걸립니다.

그래서 템플릿 엔진을 써야합니다. -ㅅ-)/” (씁시다…… )

앞으로 만든 페이지를 유지관리하거나 속도면에서 유리한면이 상당합니다…

이것저것 해보다가 jquery플러그인인 jquery templete을 사용하려고 하다가 바인딩하는 값마다가 싸줘야해서… 너무 귀찮아서 ;;;
포기하고

mustache.js!! 를 찾아냈습니다. -ㅅ-);;;

무려 용량이 9kb!!(min파일 기준)

대략적인 구현방법은…

템플릿을 같은 문서내에 bind될 값만 데이터에 맞게 만들어 숨겨둡니다.
그리고 ajax로 json 파일을 받아 mustache achat viagra soft.js로 가공해주면 끝입니다.
그렇지만 템플릿을 만들려면 템플릿 문법을 알아야합니다. ;;;
(사실 템플릿을 익히는데 거부감이 많으신분들이 많습니다. ㅠ_ㅠ )

“jquery templete으로 삽질할래 템플릿 배울래?” 하면…. 전 템플릿 배우겠습니다.

자세한 사항은 공식 사이트 https://github.com/janl/mustache.js/ 에 있습니다.

기본적인 템플릿엔진 기능인 값을 바인딩 하는 것과 루프로 값을 찍는것을 해보았습니다. (다음 링크를 보세요 ㅎㅎ)

http://jusun.org/example/mustache/

<!---
mustache.js - Logic-less {{mustache}} templates with JavaScript
https://github.com/janl/mustache.js/
--->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="mustache.min.js"></script>
<style>
	.hide { display:none; }
</style>

</head>
<body>

<div id="result1"></div>
<div id="templete1" type="x-tmpl-mustache" class="hide">
	<b>{{name}}</b> is babo. <br />
	<span style="font-size:11pt;color:red">{{age}} years old.</span>
</div>

<hr />

<div id="result2"></div>
<div id="templete2" type="x-tmpl-mustache" class="hide">
	{{#peoples}}
	* {{name}} is {{age}} years old. <br />
	{{/peoples}}
</div>



<script type="text/javascript">

//단일 데이터 메칭 
function temp_exam1(){
	var template = $('#templete1').html();
	Mustache.parse(template);

	var data = {
		name: "Luke",
		age: 15
	};
	
	var rendered = Mustache.render(template, data);
	$('#result1').html(rendered);
}

temp_exam1();



//루프 예제
function temp_exam2(){
	var template = $('#templete2').html();
	Mustache.parse(template);

	var data = 
	{
	  "peoples": [
		{ 
		  "name": "Moe",
		  "age":13
		},
		{ 
		  "name": "Larry",
		  "age":16

		},
		{ 
		  "name": "Curly",
		  "age":21
		},
		{ 
		  "name": "Jusun",
		  "age":36
		}
	  ]
	};
	
	var rendered = Mustache.render(template, data);
	$('#result2').html(rendered);
}
temp_exam2();

</script>

</body>
</html>

오늘은 여기까지 -ㅅ-)

Leave a Reply

Your email address will not be published. Required fields are marked *