ajax로 데이타를 불러온 후 화면에 뿌려주는 방법은 여러가지가 있겠지만,
twitter에서 오픈소스로 공개한 Hogan이라는 믿을만하고, 빠른 template engine이 있어 소개한다.
https://github.com/twitter/hogan.js
소스를 다운 받아 풀어보면 여러 폴더들이 있는데,
나머지 파일들은 node.js를 위한 파일들이고,
웹용으로 사용한다면 lib 폴더 안에 template.js 와 compile.js 두개의 파일만 있으면 된다.
간단한 예를 들면
twitter에서 오픈소스로 공개한 Hogan이라는 믿을만하고, 빠른 template engine이 있어 소개한다.
https://github.com/twitter/hogan.js
소스를 다운 받아 풀어보면 여러 폴더들이 있는데,
나머지 파일들은 node.js를 위한 파일들이고,
웹용으로 사용한다면 lib 폴더 안에 template.js 와 compile.js 두개의 파일만 있으면 된다.
간단한 예를 들면
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Hogan.aspx.cs" Inherits="Application__sample_Hogan" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Hogan Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://raw.github.com/twitter/hogan.js/master/lib/template.js"></script> <script type="text/javascript" src="https://raw.github.com/twitter/hogan.js/master/lib/compiler.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" /> <script type="text/javascript"> $(function () { // template에 들어갈 데이타 var data = { TITLE: "내 파일 목록", items: [ { FILE_NAME: 'first.txt' }, { FILE_NAME: 'second.jpg' }, { FILE_NAME: 'third.avi' }, { FILE_NAME: 'forth.php' } ] }; // template 준비 var template = Hogan.compile($('.template').html()); // template에 data 적용 var output = template.render(data); // 화면에 출력 $(document.body).append(output); }); </script> <style type="text/css"> .template { display: none; } </style> </head> <body> <div class="template"> <h1> {{TITLE}}</h1> <ul> {{#items}} <li>{{FILE_NAME}}</li> {{/items}} </ul> </div> </body> </html>위 코드를 브라우져에서 보면 다음과 같은 화면을 볼 수 있다.
자바스크립트 부분에 주적을 읽어보면 쉽게 이해할수 있을 것이다.
jQuery template과 비슷한 부분이 많다.
템플릿에 대한 문서는 http://mustache.github.com/mustache.5.html 를 참조.
