Sharepoint 목록 데이터를 사용하는 jQuery 템플릿

[원문 발표 주소] Using jQuery Templates with SharePoint List Data
[원문 발표 시간] 2011-06-30 02:32 PM
jQuery 라이브러리의 새로운 jQuery 템플릿 플러그인은 클라이언트 코드에 데이터 구동을 만드는 HTML을 제공합니다.이 개념은 ASP.NET 템플릿 중의 한 이념과 매우 유사하다. 즉, 클라이언트에서만 이루어지는 것이지 서버에서만 이루어지는 것이 아니다.jQuery 템플릿은 HTMl의 코드 세션으로 귀속 데이터의 필드를 표시하는 자리 차지 문자를 포함합니다.템플릿이 페이지에 나타날 때, 템플릿 플러그인은 데이터를 옮겨다니며, 자리 표시자가 표시하는 곳에 문자 세그먼트 값을 삽입합니다.
입문 기사를 보려면 jQuery 템플릿 소개를 참조하십시오.API 문서 및 샘플 코드에 대한 자세한 내용은 다음을 참조하십시오.
jQuery 웹 사이트의거푸집.
jQuery든 템플릿 플러그인이든Sharepoint에서 사용자 인터페이스를 만들 수 있는 강력한 클라이언트 도구입니다.이 블로그에서 저는 여러분들이 자바스크립트가 작성한 짧은 범례를 완성하도록 안내할 것입니다. 이 범례는 자바스크립트가 작성하여 간단한 편집기에 배치합니다.나의 이 범례는 이 공구들이 할 수 있는 일과 별로 관계가 없을 수도 있지만, 너에게 이 공구들의 조작 방법을 알려줄 것이다.
차리다
범례를 보여주기 위해sharepoint2010의 개발 실례에서 연락처 목록 템플릿으로 연락처라는 목록을 만들었습니다.또한 웹 Part Page를 새로 만들어 웹 사이트의 페이지 라이브러리에 추가했습니다.페이지의 열에 Content Editor Web Part(CEWP)를 삽입했습니다.
CEWP 편집기를 어렵게 사용하기보다는 콘텐츠 링크로 Site Assets 라이브러리에 업로드된 콘텐츠 파일을 가리키는 경향이 있습니다.내 Site Assets 라이브러리에는 JavaScript라는 폴더가 있습니다.폴더 작성자/소유자는 전체 제어 권한을 가지며 다른 사용자도 읽기 권한을 가집니다.이 폴더는 업로드한 파일과 Content Link가 가리키는 위치에 있습니다.
jQuery 라이브러리와 템플릿 플러그인에 링크
템플릿 플러그인을 사용하기 전에 웹 페이지에 jQuery 라이브러리를 불러오는 스크립트 인용이 필요합니다.또한 템플릿 플러그인의 베타 버전에서는 웹 페이지에서 플러그인을 별도의 파일로 참조해야 합니다.플러그인 코드는 최종적으로 jQuery 라이브러리와 통합되며, 파일에 링크만 하면 됩니다.현재, 당신의 페이지는 두 개의 스크립트의 인용이 필요합니다.
나의 개발 사이트는 네트워크 연결이 있기 때문에 아래의 표시로 Microsoft Ajax Content Delivery Network에 있는 jQuery 라이브러리에 연결한다.

   1: <!-- Link to the jQuery library -->

   2: <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>

   3: <!-- Link to the Templates plugin --> 

   4: <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>   

외부 원본에 연결하는 것을 좋아하지 않는다면, 라이브러리를 다운로드해서Site Assets에 업로드하거나, 모듈 (공유 자원 라이브러리로) 이 있는Sharepoint 기능을 만들어서SharePoint에 jQuery 라이브러리를SharePoint에 배치할 수 있습니다.
jQuery 템플릿이 어떻게 작동하는지 (짧은 버전)
jQuery 템플릿은 템플릿 태그가 포함된 HTML 코드 세그먼트입니다.그것들은 유사하다.NET Framework에서 메서드를 전달할 수 있는 템플릿입니다.예를 들어, 다음 C# 코드를 작성할 수 있습니다.

   1: string template = "It was {0} degrees in {1} on {2).";

   2:  string output = string.Format(template, 54, "Seattle", DateTime.Now.DayOfWeek);

이 코드에서 형식 문자열에 정의된 삽입 변수는 대체 가능한 자리 차지 문자로 실행할 때 채워집니다.유사한 jQuery는 다음과 같습니다.

   1: <script id="weatherTemplate" type="text/x-jquery-tmpl"> 

   2:   1: 

   3:   2:    <li>It was ${ Degrees } degrees in ${ City } on ${ DayOfWeek }.</li>  

   4:   3:  

   5: </script>

이런 특수한 jQuery 템플릿은 다음과 같은 데이터를 보여주기 위해 설계되었다.

   1: var weatherData = [

   2: { City: "Seattle", Degrees: 54, DayOfWeek: "Monday" },

   3: { City: "San Francisco", Degrees: 64, DayOfWeek: "Monday" },

   4: { City: "Los Angeles", Degrees: 84, DayOfWeek: "Monday" }

   5: ];

스크립트 탭에 HTML 코드 세션을 배치해서 jQuery 템플릿을 만들 수 있습니다.이 스크립트 탭의 형식 속성은 "text/x-jquery-tmpl"으로 설정됩니다.이 범례 템플릿은 현재 데이터 항목의 필드 이름으로 표시된 많은 ${}을 사용합니다.템플릿을 렌더링하면 HTML 코드 세그먼트의 복사본이 데이터 세트의 각 항목과 일치하고 특정 값이 채워집니다.더 복잡한 논리적 관계를 가진 다른 탭도 사용할 수 있습니다.전체 목록은 String.Format을 참조하십시오.
템플릿을 정의하는 것 외에, jQuery가 출력을 표시할 수 있도록 DOM에 요소를 표시해야 합니다.예를 들어, jQuery가 일기예보 템플릿에서 다음 요소에 정의된 목록으로 추가 출력하도록 지시할 수 있습니다.

   1: <ul id="weatherContainer></ul>

자, 데이터, 데이터 형식을 설정하는 템플릿, 출력을 받는 HTML 요소를 가지고 있습니다.이제 남은 것은 jQuery 템플릿 플러그인을 호출하여 자바스크립트 스크립트를 작성하고 템플릿을 사용하여 출력 용기에 데이터를 보여 주는 것입니다.별도의 jQuery 체인을 사용하여 다음을 수행할 수 있습니다.

   1: $("#weatherTemplate").tmpl(weatherData).appendTo("#weatherContainer");

jQuery 템플릿이Sharepoint에 어떻게 작용하는지
SharePoint 웹 사이트에서 가장 재미있는 데이터는 목록 항목의 필드에서 찾을 수 있습니다.예를 들어, 연락처 목록에서 데이터 형식을 다시 설정할 수 있는 웹 Part를 작성하고 있다고 가정하십시오.이 가설의 예에서 당신이 하고 싶은 것은 연락처 정보의 줄임말을 포함하는 목록을 보여주고 연락처가 회사에 따라 순서를 정하기를 원하는 것이다.그림 1과 같은 출력을 원한다면.
그림1: 간결한 연락처 목록
목록을 만들려면 다음과 같은 출력 컨테이너와 jQuery 템플릿을 정의할 수 있습니다.

   1: <p><strong>${ Company }</strong><br/>

   2: ${ FirstName } ${ LastName } 

   3: {{if BusinessPhone}}

   4: | ${ BusinessPhone } 

   5: {{/if}}

   6: {{if EMailAddress }}

   7: | <a href="mailto:${ EMailAddress }">${ EMailAddress }</a> 

   8: {{/if}}

   9: </p>

템플릿에 있는 세 개의 자리 차지 문자는 ${} 표시입니다. 연락처 목록 항목에 문자 세그먼트를 지정하는 것은 간단명료합니다.BusinessPhone과 EMailAddress 데이터의 형식은 {{{if}}} 라벨로 포장되어 있으며, 목록에 필요한 문자가 아니기 때문에 표시할 조건을 지정합니다.이 문자 세그먼트는 일부 항목에 데이터가 포함되지 않을 수도 있습니다.
템플릿을 채우기 위해 데이터를 얻기 위해, 당신이 해야 할 일은 jQuery 라이브러리의 Ajax 간단한 방법 템플릿 레이블 을 호출하는 것입니다.이 방법은 어떤 서비스의 URL을 받아들인다. 이 서비스는 데이터에 작용하는 데이터와 리셋 함수를 제공한다.
서비스에 대해 우리는 jQuery.getJSON(에서 제공한 목록 서비스를 사용할 수 있다.예를 들어 연락처 목록의 JSON 데이터를 가져오고 회사 이름에 따라 정렬을 요구하면 다음과 같은 상대 URL을 사용할 수 있습니다.

"../_vti_bin/ListData.svc/Contacts?$orderby=Company"

그리고 응답에 대해 우리가 하고 싶은 것은 단지 템플릿의 데이터를 보여주는 것뿐이다.우리는 메타데이터의 서면 함수를 전달할 수 있다.그것이 하는 일은 템플릿을 데이터에 연결하고 출력을 용기에 추가하는 것이다.

   1: $(document).ready(function () {

   2: // Get the list data.

   3: $.getJSON(

   4: '../_vti_bin/ListData.svc/Contacts?$orderby=Company', 

   5: function(data) {

   6: $('#contactTemplate') // Select the template. 

   7: .tmpl(data.d.results) // Bind it to the data. 

   8: .appendTo('#contactsContainer'); // Render the output.

   9: }

  10: );

  11: });

전체 코드 및 태그
다음은 완전한 코드와 태그입니다. 이 코드와 태그를 Site Assets 라이브러리에 업로드하고 Content Editor 웹 Part에 링크하여 그림 1과 같은 출력을 얻을 수 있습니다.

   1: <p><strong>${ Company }</strong><br/>

   2: ${ FirstName } ${ LastName } 

   3: {{if BusinessPhone}}

   4: | ${ BusinessPhone } 

   5: {{/if}}

   6: {{if EMailAddress }}

   7: {{/if}}

   8: </p>

   9: $(document).ready(function () {

  10: // Get the list data.

  11: $.getJSON(

  12: '../_vti_bin/ListData.svc/Contacts?$orderby=Company', 

  13: function(data) {

  14: $('#contactTemplate') // Select the template. 

  15: .tmpl(data.d.results) // Bind it to the data. 

  16: .appendTo('#contactsContainer'); // Render the output.

  17: }

  18: );

  19: });