Carlos Gustavo – The Froskie

Finalmente a turma da jQuery resolveu lançar (ou agregar) um plugin oficial de template para sua biblioteca. Eu mesmo já fiz algumas extensões para o mesmo fim, mas claro, não me extendi a ponto de implementar a opção de condicionais dentro do template.

Seguem alguns exemplos de como usá-lo.

<!-- este é o template -->
<script type="text/x-jquery-templ" id="list_template">
  <li>${$data}</li>
</script>

<!-- esta é a lista a ser gerada -->
<ul id="the_list"></ul>

<script type="text/javascript">
$(function(){
  // array de elementos
  var list = ['Foo', 'Bar', 'Duh'];

  // cria o template
  var list_template = $("#list_template").template();

  // processa a template e adiciona a lista
  $.tmpl(list_template, list).appendTo("#the_list");
});
</script>

Um outro exemplo mais completo, usando o Twitter

<!-- o template, com dados de um tweet -->
<script type="text/x-jquery-templ" id="tweet_template">
  <p>
    <b>@${user.screen_name}</b><br/>
    ${text}<br/>
    <small>${created_at}</small>
  </p>
</script>

<!-- div que recebe o resultado -->
<div id="tweets"></div>

<script type="text/javascript">
 $(function(){
   /**
   * recupera a timeline publica e envia
   * o resultado para a funcao de callback
   */
  $.ajax({
    dataType:'jsonp',
    url: 'http://api.twitter.com/1/statuses/public_timeline.json',
    success:parseTemplate
  })

  // recebe os dados
  function parseTemplate(result){
    // cria a instancia do template
    var tweet_template = $("#tweet_template").template();
    // processa o template e adiciona o resultado
    $.tmpl(tweet_template, result).appendTo("#tweets");
  }
});
</script>

Lembrando que é um plugin, ou seja, não vem (por enquanto) com o core. É isso aí.