자바 스크립트 탬플릿 엔진을 왜 써야하는가에 대한 고찰부터 해봐야할거 같네요.
원페이지 웹 페이지를 개발하다 보면 동적으로 화면을 붙이거나 서버에서 데이터만 가져와서
화면을 구성해야하는 경우가 있습니다.
작성자가 작업한것처럼 급한경우에는 필요한 영역에 html을 append하는 경우가 다반사였습니다.
if($("input:radio[name=MARKETGBN]:checked").val() == "BIGBANG"){
var html = '';
html += '<option value="">전체</option>';
html += '<option value="GD">지드래곤</option>';
html += '<option value="TAEYANG">태양</option>';
html += '<option value="TOP">탑</option>';
$("#RESCONTACTTYPE").append(html);
}동적으로 처리해야 하는 부분이 많다면 소스 자체도 복잡해지고 가독성도 떨어집니다.
그래서 html로 불러다가 붙이는 경우도 있습니다.
html을 ajax으로 불러 화면에 붙이게 되면 속도가 빠른경우는 문제가 되지 않겠지만
페이지가 크다면 페이지를 불러 올때마다 로드가 걸립니다.
그래서 템플릿 엔진을 써야합니다. (권장)
앞으로 만든 페이지를 유지관리하거나 속도면에서 유리한면이 상당합니다…
무려 용량이 9kb!!(min파일 기준)
대략적인 구현방법은…
템플릿을 같은 문서내에 bind될 값만 데이터에 맞게 만들어 숨겨둡니다.
그리고 ajax로 json 파일을 받아 mustache.js로 가공해주면 끝입니다.
그렇지만 템플릿을 만들려면 템플릿 문법을 알아야합니다. ;;;
자세한 사항은 공식 사이트 https://github.com/janl/mustache.js/ 에 있습니다.
기본적인 템플릿엔진 기능인 값을 바인딩 하는 것과 루프로 값을 찍는것을 해보았습니다.
<!---
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>
참조사이트 : blog.jusun.org/archives/63
