jQuery.tmpl 플러그 인 튜토리얼

jQuery.tmpl( template [, data] [, options] ) Returns: jQuery

Description: Render the specified HTML content as a template, using the specified data.

• jQuery.tmpl( template [, data] [, options] )    

• version added: 1.4.3

  template The HTML markup or text to use as a template.

  data The data to render. This can be any JavaScript type, including Array or Object.

  options An optional map of user-defined key-value pairs. Extends the tmplItem data structure, available to the template during rendering.

  
  

이 글은 jQuery Templates 플러그인 (jquery-tmpl)과 관련된 문서입니다. 이 플러그인은  http://github.com/jquery/jquery-tmpl 에서 다운로드 받으실 수 있습니다.

jQuery.tmpl() 메소드는 .appendTo, .prependTo, .insertAfter, .insertBefore 같은 것들과 어울려 아래의 예제처럼 사용되도록 만들어 졌습니다.


Example:

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

이 template 파라미터는 다음과 같은 것들이 될 수 있습니다.

• 마크업을 포함한 string
  
• 템플렛으로 사용되기 위한 콘텐트를 가지고 있는 HTML element (혹은 element로 둘러 싸여져 있는 jQuery 객체)
  
• named template의 이름과 연관돼 있는 string (jQuery.template() and .template() 를 보세요.)
  
• 컴퍼일된 템플렛 함수 ( jQuery.template() and .template() 를 보세요.)
  

만약에 data가 배열이라면 그 탬플릿은 배열의 각 아이템에 대해 한번 render 됩니다. 데이터가 객체이거나 data 파라미터가 없거나 null 이라면 single template item이 render 됩니다.

return 값은 렌더링된 탬플릿 아이템으로 만들어진 element들의 jQuery collection 입니다. (각 배열에 있는 하나 혹은 각각의 데이터 아이템). 만약 템플렛에 top level element만이 포함돼 있다면 배열의 각 데이터에 대해 한개의 element가 있게 됩니다.

HTML DOM에 렌더링된 템플릿 아이템을 insert 하기 위해 리턴된 jQuery collection은 DOM에 directly insert 되면 안됩니다. .appendTo, .prependTo, .insertAfter or .insertBefore 등과 연결되서 사용되어져야 합니다.


$.tmpl( myTemplate, myData ).appendTo( "#target" );

See also .tmpl().

Example

아래 예제는 jQuery.tmpl()을 로컬데이터로 render 하기 위해 어떻게 사용되는지를 보여 줍니다. template은 하나의 string 이 사용됐습니다.

<ul id="movieList"></ul>

<script type="text/javascript">
  var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

  var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

  // Compile the markup as a named template
  $.template( "movieTemplate", markup );

  // Render the template with the movies data and insert
  // the rendered HTML under the "movieList" element
  $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );
</script>

Using Remote Data

일반적으로 데이터는 로컬이 아닙니다. 대신에 데이터는 리모트 서비스나 페이지로 request 하는 Ajax를 사용합니다. 아래 그 예제가 있습니다.

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

$.ajax({
  dataType: "jsonp",
  url: moviesServiceUrl,
  jsonp: "$callback",
  success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
  // Render the template with the "movies" data and insert
  // the rendered HTML under the 'movieList' element
  $.tmpl( "movieTemplate", data )
    .appendTo( "#movieList" );
}

The Markup for the Template

여러분은 (computed 되거나 원격으로 obtained 되었을) string 으로부터 혹은 페이지에 있는 inline markup으로부터 템플릿을 위한 markup을 받을 수 있습니다. 어떻게 inline markup을 사용하는지를 보시려면 .tmpl()를 보세요.

Caching the Template

탬플릿이 렌더링 될 때 markup은 우선 컴파일된 탬플릿 function으로 convert 됩니다. 항상 $.tmpl( markup , myData ).appendTo( "#target" )이 call 됩니다. 이 탬플릿은 recompile 됩니다. 만약 같은 탬플릿이 렌더링 데이터로 한번 이상 사용된다면 이 compil된 템플릿이 cache 될 거라는 걸 염두에 두세요. 페이지의 inline markup 에서가 아니라 string 으로ㅜ터 획득 된 markup을 사용할 때 템플릿을 cache 하기 위해서는 재사용을 위해 named template을 생성하기 위해 $.template( name, markup )를 사용하세요.


Template Tags, Expressions, and Template Variables

${}같은 탬플릿 태그들은 text와 HTML markup을 추가할 수 있도록 jQuery 탬플릿 안에서 사용될 수 있습니다. 이러면 탬플릿의 composition, hierarchical data에 대한 iteration, 탬플릿 렌더링의 parameterization 같은 여러 상황에서 유용하게 사용될 수 있겠죠. 탬플릿 태그들은 데이터 아이템 필드의 value들에 기초한 content나 $item 같은 탬플릿 변수를 렌더링할 수 있습니다. 각각의 탬플릿 태그들에 대해 알아보시려면 다음 문서들을 보세요. ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}

The options Parameter, and Template Items

탬플릿내의 데이터 아이템이 렌더링 된 결과인  각 탬플릿 아이템들은 tmplItem data structure 와 연관되어 있습니다. 이것은 jQuery.tmplItem() 과 .tmplItem(), 혹은 $item template 변수를 사용해서 접근될 수 있습니다. jQuery.tmpl()의 옵션 파라미터로 pass 된 필드들이나 anonomyous methods 들은 tmplItem data structure를 extend 할 겁니다. 그리고 다음의 예제에서 처럼 탬플릿화 할 수 있습니다.

var markup = "<li>Some content: ${$item.myMethod()}.<br/>" 
           + " More content: ${$item.myValue}.</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

// Render the template with the movies data
$.tmpl( "movieTemplate", movies,
  { 
      myValue: "somevalue", 
      myMethod: function() { 
          return "something";
      } 
  } 
).appendTo( "#movieList" );

Additional Notes:

• Netflix recently changed the API that we use in the remote service example below. We are aware that this change breaks the demo and will work on an update as soon as we can.

Examples:

Example: Render local data using jQuery.tmpl().

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/
beta1/jquery.tmpl.min.js"></script>
</head>
<body>
  
<ul id="movieList"></ul>

<script>
  var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template( "movieTemplate", markup );

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */
$.tmpl( "movieTemplate", movies )
  .appendTo( "#movieList" );
</script>

</body>
</html>

Demo:

Example: Render data from a remote service, using jQuery.tmpl().

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/
jquery.tmpl.min.js"></script>
</head>
<body>
  
<button id="cartoonsBtn">Cartoons</button>
<button id="dramaBtn">Drama</button>

<ul id="movieList"></ul>

<script>
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template( "movieTemplate", markup );

function getMovies( genre, skip, top ) {
  $.ajax({
    dataType: "jsonp",
    url: "http://odata.netflix.com/Catalog/Genres('" + genre
    + "')/Titles?$format=json&$skip="
    + skip + "&$top=" + top,
    jsonp: "$callback",
    success: function( data ) {
      /* Get the movies array from the data */
      var movies = data.d;

      /* Remove current set of movie template items */
      $( "#movieList" ).empty();

      /* Render the template items for each movie
      and insert the template items into the "movieList" */
      $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );
    }
  });
}

$( "#cartoonsBtn" ).click( function() {
  getMovies( "Cartoons", 0, 6 );
});

$( "#dramaBtn" ).click( function() {
  getMovies( "Drama", 0, 6 );
});

</script>

</body>
</html>