Ajax로 읽어온 JSON 데이터로부터 HTML을 생성해주어야 하는 경우에 사용하기 좋은 문자열 템플릿 처리 라이브러리를 찾다가, jQuery 플러그인인 nano를 발견했다. jQuery nano 플러그인은 매우 간단한 라이브러리로서 아래 사이트에서 다운로드 받을 수 있다.
- https://github.com/trix/nano
jQuery 1.9.1을 사용하고 있는데, 동작하지 않아 다음과 같이 코드를 일부 수정하였다. (빨간색으로 표시한 부분 삭제 처리, 다른 jQuery 버전에서는 어떻게 동작하는지 확인해보진 않았다.)
/* Nano Templates (Tomasz Mazur, Jacek Becela) */
(function($) {
var _regex = /\{([\w\.]*)\}/g;
$.fn.nano = function(template, data) {
return template.replace(_regex, function (str, key) {
var keys = key.split('.'), value = data[keys.shift()];
$.each(keys, function() { value = value[this]; });
return (value === null || value === undefined) ? '' : value;
});
};
}(jQuery));
사용방법은 간단한다. 다음과 같이 jquery와 함께 jquery.nano.js를 <script>로 읽어온 뒤에 $.nano() 메서드를 사용해서 변환 처리를 하면 된다.
<script src="/js/jquery/jquery-1.9.1.min.js"></script>
<script src="/js/jquery/jquery.nano.js"></script>
<script>
var data = {
content: {
title: "제목",
imageUrl: "/pds/1.png"
},
desc: "설명"
}
var html = $.nano("<div>{content.title}</div><img src='{content.imageUrl}' alt='{desc}' />", data);
</script>
위 코드에서 nano() 함수의 첫 번째 파라미터는 문자열 템플릿이며, 두 번째 인자는 템플릿에서 사용될 값을 갖는 JSON 객체이다. 문자열에 포함된 {변수명}은 JSON 객체의 해당하는 값으로 치환된다. 예를 들어, 위 코드에서 {content.title}은 data.content.title의 값으로 치환되며, {desc}는 data.desc로 치환된다. 따라서, 위 코드에서 $.nano() 함수의 실행 결과로 생성되는 문자열 html은 "<div>제목</div><img src='/pds/1.png' alt='설명' />"이 된다.
사용법이 매우 간단하면서도 Ajax로 읽어온 JSON 객체를 그대로 사용할 수 있다는 점에서 유용하다.