저작권 안내: 저작권자표시 Yes 상업적이용 No 컨텐츠변경 No

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

'String template'에 해당되는 글 1건

  1. 2013.03.27 [팁] jQuery nano 플러그인을 이용한 자바스크립트 문자열 템플릿 처리 (2)

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 객체를 그대로 사용할 수 있다는 점에서 유용하다.

Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 간세 2013.03.28 09:54 신고  댓글주소  수정/삭제  댓글쓰기

    오~ 굉장히 유용하겠네요.
    $('<div/>').attr(...).html(..).appendTo(..)
    이런코드가 확 줄겠네요..
    좋은 정보 감사합니다. 꾸벅.