[jQuery]jQuery의 새로운 공식 플러그인 Templating과 Data Linking..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

지난 4일 jQuery 팀은 블로그를 통해서 Templating, Data Linking, Globalization 공식플러그인을 발표했습니다. 지난 3월에 열린 MIX 2010에서 Microsoft가 코드 공헌 및 리소스를 통해서  jQuery 프로젝트를 지원하기로 발표한 이후 MS는 템플릿기능일 제공하는 플러그인은 jQuery 커뮤니티에 리뷰하였고 뒤이어 data 동기화를 위한 Data Link 플러그인과 다국어화를 위한 플러그인인 Globalization 플러그인을 제공하였다고 합니다. 7달의 개발기간동안 jQuery의 베스트 프렉티스와 커뮤니티의 요구사항들을 충족시키기 위해서 jQuery팀과  Microsoft팀은 아주 밀접하게 일했으며 이 모든 코드는 jQuery처럼 제한없는 라이센스를 보장하고 있습니다.

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용 코드를 참고하면 사용하는 방법에 대해서 알 수 있습니다.

JavaScript

1 2	var dataObject = {firstName: "John", lastName: "Resig"} $("ul").append( "<li>${firstName} - ${lastName}</li>", dataObject, null );

위와같이 간단하게 템플릿을 사용할 수 있습니다.

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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객체와 엘리먼트 사이에 바인딩을 지원합니다.

JavaScript

1 2 3 4 5

var person = {}; $("form").link(person, { firstName: "first-name", lastName: "last-name", });

위와같이 바인딩을 하면 person의 firstName이나 lastName의 값이 변경되었을 때 form의 값도 같이 변경되며 그 반대도 마찬가지입니다. 바인딩을 해제할 때는 unlink() 메서드를 사용합니다.