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Ã.
0 Comments.