jquery-template[jquery-tmpl][제이쿼리 템플릿]

 

jquery template과 data binding을 동시에

 

———————————————————————————————-

Templates plugin…

 

이름만 들어보면 뭐 같나요?

이름대로 템플레이트 만들어서 data를 바인딩 시키는 플러그인 입니다.

 

jquery 1.4.2 이상의 버전에서 동작합니다. 템플레이트 플러그인은 MS랑 공동개발 했다고 하네요.

 

 

 

 

1. 설치

일단 템플레이트 플러그인을 받아야 합니다.

https://github.com/jquery/jquery-tmpl

jquery.tmpl.js를 받으시면 됩니다. min 버전을 받으셔도 되고 일반 버전 받으셔도 됩니다.

jquery.tmpPlus.js 는 좀더 템플레이트를 사용 쉽게 하기 위해서 기본적인 jQuery 메소드들을 확장하기 위한 플러그인 입니다.

 

 

 

2. inline templates

인라인 템플레이트는 html 페이지 내에 script 태그를 통해서 템플릿을 만드는 겁니다.

아래 예저 보시면..

 

<script type=“text/javascript” src=“jquery-1.4.3.js”></script> <script type=“text/javascript” src=“jquery.tmpl.js”></script> <script type=“text/javascript”> $(function() { var data = [ {“name” : “loudon23”, “year” : “2010”}, {“name” : “loudon24”, “year” : “2011”} ]; // inline templates $(“#item”).tmpl(data).appendTo(“#test”); }</script> <!– inline templates –> <script id=“item” type=“text/html”> <li><em>${name}</em> (${year})</li></script> <ul id=“test”></ul>

data 의 내용을 맨아래 script내의 템플릿에 맞춰서 데이터를 넣고 만들어진 html DOM 객체를 id값이 test(UL태그)에 넣는것입니다.

촉이 오시죠? ㅎㅎ

 

 

 

2. pre-complied templates

두번째로 따로 템플릿을 정하지 않고 $.templates() 메소드를 통해서 템플릿을 만드는 예저 입니다.

 

<script type=“text/javascript” src=“jquery-1.4.3.js”></script> <script type=“text/javascript” src=“jquery.tmpl.js”></script> <script type=“text/javascript”> $(function() { var data = [ {“name” : “loudon23”, “year” : “2010”}, {“name” : “loudon24”, “year” : “2011”} ]; // pre-complied templates $.template(“listTmpl”, “<li><em>${name}</em> (${year})</li>“);     $.tmpl(“listTmpl”, data).appendTo(“#test”); }</script> <ul id=“test”></ul>

$.template()로 listTempl 이라는 템플릿을 만들고 $.tmpl() 메소드로 data의 값을 바인딩 시킨후 만들어진 html DOM 을 id값이 test에넣는 것입니다.

 

 

 

3. append를 이용한 templates

이 방법은 jquery의 기본 메소드인 $.append()를 이용하는 방법입니다.  이 방법을 이용하기 위해서는 jquery.tmplPlus.js 를 추가 하셔야 합니다.

<script type=“text/javascript” src=“jquery-1.4.3.js”></script> <script type=“text/javascript” src=“jquery.tmpl.js”></script> <script type=“text/javascript” src=“jquery.tmplPlus.js”></script> <script type=“text/javascript”> $(function() { var data = [ {“name” : “loudon23”, “year” : “2010”}, {“name” : “loudon24”, “year” : “2011”} ];  $(“#test”).append(“<li><em>${name}</em> (${year})</li>”, data); }</script>  <ul id=“test”></ul>

id가 test인 객체에 append()에 정의된 첫번째 인자값(템플릿)을 data값으로 매칭 시킨 후에 append 하는 예제 입니다.

 

 

 

4. access templates data

마지막으로 템플릿으로 만들어진 htmlDOM 객체에서 다시 데이터를 뽑아 내는 방법입니다.

<script type=“text/javascript” src=“jquery-1.4.3.js”></script> <script type=“text/javascript” src=“jquery.tmpl.js”></script> <script type=“text/javascript”> $(function() { var data = [ {“name” : “loudon23”, “year” : “2010”}, {“name” : “loudon24”, “year” : “2011”} ]; // inline templates $(“#item”).tmpl(data).appendTo(“#test”);         // access Template Data var lastTemplateItem = $(“ul li:last”).tmplItem(); var itemData = lastTemplateItem.data;           // 템플레이트의 데이터 가져오기 var htmlNodes = lastTemplateItem.nodes;     // 템플레이트이 노드들 가져오기  alert(“name:” + itemData.name + ” / year:”+ itemData.year);     }</script> <!– inline templates –> <script id=“item” type=“text/html”> <li><em>${name}</em> (${year})</li></script> <ul id=“test”></ul>

인라인 템플릿으로 정의된 거에서 ul내의 마지막 li 를 추출해서 템플릿 아이템을 뽑습니다( tmplItem() ) 이것을 가지고 data나 nodes 를 추출 해내는 것입니다.