jquery template 예제 1

mirinae.maru 0 Comments

■ 공식사이트 https://github.com/BorisMoore/jquery-tmpl
 

■ jquery.tmpl.js을 다운로드

<script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>

 

■ 테스트를 위한 data object를 생성

function makeJSON() {
    var jsonArr = [ "한글", "b", "c"];          // 배열 object
    var tmplVal = new Object();
    tmplVal.jsonArr = jsonArr;

    return tmplVal;
}

 

■ tmplView div에 sampleTmpl 템플릿으로 tmplVal데이터를 표현

$(document).ready(function() {

    var tmplVal = makeJSON();
    console.log( "[mirinae.maru] tmplVal : " + JSON.stringify(tmplVal) );
    $(sampleTmpl).tmpl(tmplVal).appendTo("#tmplView");
});

 

■ body( tmplView )

<div id="tmplView"/>

 

■ 전체 소스

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>radio test</title>
<script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>

<script id="sampleTmpl" type="text/x-tmpl">
{{each(key,item) jsonArr}}
<div>${item}</div><br>
{{/each}}
</script>

<script type="text/javascript">
function makeJSON() {
    var jsonArr = [ "한글", "b", "c"];
    var tmplVal = new Object();
    tmplVal.jsonArr = jsonArr;

    return tmplVal;
}
$(document).ready(function() {

    var tmplVal = makeJSON();
    console.log( "[mirinae.maru] tmplVal : " + JSON.stringify(tmplVal) );
    $(sampleTmpl).tmpl(tmplVal).appendTo("#tmplView");
});
</script>
</head>

<body>
<div id="tmplView"/>
</body>
</html>

 

■ Tip1 : jstl core tag를 사용할 경우에는 escape를 하여야 한다.(\${xx})
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다