[jQuery Template] 문법

다운로드

기본 jQuerygithub.com/BorisMoore/jquery-tmpl

이해

tmpl( ) 안에는 데이터가 들어온다. 데이터는 배열이다. 그리고 배열의 원소는 반드시 객채의 형태이어야 한다. 이 객체는 template과 바인딩되어 template 안에서 활용되어 진다.

문법

#1 option의 사용

$.tmpl( "<li>${ Name }</li>", { "Name" : "John Doe" } ).appendTo( "여기에(위치)" )

- 선택적인 맵(키-값)을 입력 가능한 공간으로, template이 만들어지는 동안에  data를 확장 시킬수 있다.

 

#2 템플릿 소스를 가지고 있는 객체에 체인 형식으로 사용.

$( "이거를(반복 됨)" ).tmpl( { data:data, data1:data1, data2:data2 } ).appendTo( "여기에(위치)" );

 

#3 문자열을 이용하는 법

 

#4 template함수를 사용하는 법

(템플릿 소스를 가진 객체를 지정해 템플릿 이름을 부여)

 

(template함수에 부여할 템플릿이름과 사용할 코드를 직접 입력)

 

(tmplItem은 template를 이용해 만들어진 코드의 데이터에 접근할수 있도록 해주는 함수)

1. render data or expressions

${ } 와 {{=  }} 은 같다.

{{ html }} 은 html 마크업을 render 한다.

 

[주의] 템플릿 안에서 for문 사용 불가.

아래와 같이 for문 사용을 위한 스크립트 추가가 필요하다.

 

<script>

(function ($) {

$.extend(jQuery.tmpl.tag, {

    "for": {

        _default: {$2: "var i=1;i<=1;i++"},

        open: 'for ($2){',

        close: '};'

    }

});

})(jQuery);

</script>

 

2. 사용 함수

.appendTo( ) : 영역 안에서 끝 부분에 위치

.prependTo( ) : 영역 안에서 시작 부분에 위치

.insertAfter( ) : 영역 밖에서 target 바로 다음에 위치

.insertBefore( ) : 영역 밖에서 target 바로 앞에 위치

 

★★  borismoore.github.io/jquery-tmpl/demos/step-by-step.html