Microsoft가 공헌한 Templates, Data Link, jQuery Globalization 플러그인들은 jQuery의 공식 플러그인으로 받아들여졌습니다. 공식플러그인이 됨으로써 이 플러그인들은 jQuery와 jQuery UI 라이브러리의 차기버전의 호환성이 계속 보장될 것입니다. Templates 플러그인과 Data Link플러그인은 jQeury Core팀에서 관리될 것이고 Globalization플러그인은 jQuery UI 프로젝트에 포함될 것이며 Templates 플러그인은 1.5버전부터 Core라이브러리에 통합될 예정이라고 합니다.
공개된 이후 몇일 사이에 이 플러그인들에 대한 소식이 많이 눈에 띄어서 자료를 찾아보면서 정리해 봅니다. 자세한 사용은 찬찬히 만져보면서 써봐야 할것 같습니다. 둘다 상당히 매력적이지만 특히 템플릿 플러그인은 Script.aculo.us를 사용하면서 Builder를 유용하게 사용했기 때문에 jQuery를 쓸때는 이른 유틸리티함수들이 아쉬웠기 때문에 아주 유용할 듯 합니다.
jQuery Templates plugin
jQuery사이트를 통해서 API문서를 제공하고 있고 소스는 github에 공개되어 있으며 jQuery 1.4.2버전이 필요합니다. api문서를 참고하여도 되지만 demo용 코드를 참고하면 사용하는 방법에 대해서 알 수 있습니다.
var dataObject = {firstName: "John", lastName: "Resig"}
$("ul").append( "<li>${firstName} - ${lastName}</li>", dataObject, null );
위와같이 간단하게 템플릿을 사용할 수 있습니다.
<script>
var arrayOfDataObjects = [
{ firstName: "Dave", lastName: "Reed" },
{ firstName: "Boris",lastName: "Moore" }
];
$( "#leadingOrTrailingText" )
.tmpl( arrayOfDataObjects )
.appendTo( "#test" );
</script>
<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
${firstName} <strong>${lastName}</strong> <br/>
</script>
복잡한 템플릿의 경우는 위 코드와 같이 템플릿을 따로 정의해 두고 사용하는 것도 가능하며 .tmplItem() 메서드를 사용하면 템플릿에 적용한 데이터 오브젝트를 가져올 수 있습니다.
jQuery Data Link plugin
Data Link플러그인도 API문서를 제공하고 github에 소스가 공개되어 있습니다만 아직 공개되지않은 jQuery 1.4.3버전에 의존하고 있기 때문에 jQuery 저장소에서 최신소스를 받거나 Data Link저장소에 포함되어 있는 jQuery파일을 사용하여야 합니다.
jQuery는 이미 data()같은 data API를 지원하고 있습니다. 이 data API는 문자열이아 아닌 데이터도 저장할 수 있으며 엘리먼트가 삭제될때 모두 제거해주기 때문에 성능을 향상시키고 메모리 누수도 피할수 있기에 데이터노드에 직접 데이터를 첨부하는것 보다 낫습니다만 Data Link 플러그인은 DOM객체와 엘리먼트 사이에 바인딩을 지원합니다.
var person = {};
$("form").link(person, {
firstName: "first-name",
lastName: "last-name",
});
위와같이 바인딩을 하면 person의 firstName이나 lastName의 값이 변경되었을 때 form의 값도 같이 변경되며 그 반대도 마찬가지입니다. 바인딩을 해제할 때는 unlink() 메서드를 사용합니다.
잘 읽고 갑니다.
부지런하시네요. 이런걸 보고 조금씩 해보고 하시는데 대단해 보입니다.
언제 다 해보시는건가요?
틈틈히 해본거나 링크만 간진해 뒀다가
퇴근하고 해보거나 아니면 주말을 보통 이용해서 해봅니다.
이 글 같은 경우는 사실 소스도 제대로 안만져보고... 뉴스보고 이해할려고 정리한게 아까워서 포스팅했네요 ㅎㅎㅎ 이런 날림은 좀 삼가해야 하는데요. ㅎㅎㅎ 잘 읽어주셨다니 다행입니다. ㅎ
prototype.js 에 내장되어 있던 Template 클래스의 업그레이드 판이군요.. :) 좀 더 파봐야 겠지만 외부 엔티티(e.g File, url) 을 템플릿으로 활용할 수 있으면 더 좋을것 같습니다.. 저는 TrimPath 도 즐겨쓰는데 저것도 좀 봐야겠네요... 저도 아웃사이더 님 글을 보고 참 많이 배웁니다 ^^
방향은 맞다고 생각하지만 prototype.js에서 jquery로 넘어오고 제일 불편한게 이런 기능들이었는데 잘 나온것 같습니다. 저도 구체적인건 아직 못만져 봐서요.. boxsersb님은 직접 도큐먼트보시는게 더 이해가 빠르실것 같은데요. ㅎㅎ
근데 TrimPath는 어떤걸 말씀하시는 건가요?
좋은내용 감사합니다. 큰 도움이 되었어요! 내용중 일부를 인용해 블로깅할께요~
예.. 1년정도 된 글이라 최신버전에서는 변경사항이 있을수도 있습니다.