Como fazer para trabalhar com jQuery Templates
Vamos começar a trabalhar com jQuery Templates. Basicamente serve para disponibilizar e principalmente manipular os dados no browser.
Por exemplo, você pode usar o jQuery Templates para formatar e exibir os dados vindo de uma chamada ajax.
jQuery Templates suporta um número poderoso de funcionalidades como templates tags, template composition, e wrapped templates. Eu vou me concentrar nas funcionalidades que eu penso ser mais usual.
O jQuery Templates plugin foi desenvolvido pelo time da Microsoft ASP.NET com colaboração do time jQuery - código aberto.
Vamos colocar a mão na massa:
Vamos começar com um exemplo simples de como usar jQuery Template. Nós vamos usar o plugin para listar os livros armazenado em um array. Segue o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Intro</title>
<link href="0_Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContent">
<h1>ASP.NET Bookstore</h1>
<div id="bookContainer"></div>
</div>
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript">
// Create an array of books
var books = [
{ title: "ASP.NET 4 Unleashed", price: 37.79, picture: "AspNet4Unleashed.jpg" },
{ title: "ASP.NET MVC Unleashed", price: 44.99, picture: "AspNetMvcUnleashed.jpg" },
{ title: "ASP.NET Kick Start", price: 4.00, picture: "AspNetKickStart.jpg" },
{ title: "ASP.NET MVC Unleashed iPhone", price: 44.99, picture: "AspNetMvcUnleashedIPhone.jpg" },
];
// Render the books using the template
$("#bookTemplate").tmpl(books).appendTo("#bookContainer");
function formatPrice(price) {
return "$" + price.toFixed(2);
}
</script>
</body>
</html>
Quando abrir a página do browser verá a seguinte página:
Primeira coisa a notar de diferente é o MIME type "text/x-jQuery-tmpl". Que foi atráves dele que fiquei sabendo que se tratava de um "jQuery Template". Segue:
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>
Esse template exibe para cada livro renderizado pelo template. O template mostra a "picture", "title" e "price".
Note também que a tag SCRIPT está decorada com um MIME type "text/x-jQuery-tmpl". Porque?
Quando o browser encontra uma MIME type desconhecido ele ignora essa tag. Esse é o comportamentp que você busca com usao de um template. Você não quer que o browser interprete pois pode causar efeitos colaterais.
E também não podemos deixar de notar a expressão ${...} que é usado pra exibir o valor da expressão JavaScript dentro do template. Por exemplo, a expressão ${title} é usado para mostrar o valor do título do livro. Você pode usar qualquer função Java Script dentro da expressão ${...}. Por exemplo, no exemplo abaixo, o preço do livro é formatado com ajuda de uma função JavaScript formatPrice(), que é definida na parte inferior da página.
E por fim vamos atentar para o método tmpl().Que basicamente renderiza o array java script no "bookTemplate". Segue:
$("#bookTemplate").tmpl(books).appendTo("#bookContainer");
Dentro do Template podemos usars as seguintes Tags:
{{tmpl}} - Usado para template composition
{{wrap}} - Usado para wrapped templates
{{each}} - usado para interar uma coleção
{{if}} - usado para condicionar o sitens do template
