A linguagem HTML é muito limpa e independente para formatação, efeitos e usabilidade. O jquery leva esta usabilidade e formatação ao extremo. Agora, o jquery template se propõe a dividir, na apresentação, a camada de dados do aspecto visual. Isto possibilita a produção de templates com locais definidos para o programador e para o designer.
A template de tabela
Todo mundo conhece a tabela em HTML, mecanismo básico e estruturado de apresentação de dados. Dentro do TBODY, o grupo que se repete, para uma tabela com somente uma coluna é:
<tr><td>Conteúdo</td></tr>
Se o conteúdo é o link com seu texto de apresentação, o grupo fica:
<tr><td><a href="address">title</a></td></tr>
Vamos supor, em uma nova linguagem, que pudéssemos ter a sintaxe:
<tr><td><a href="${address}">${title}</a></td></tr>
E que pudéssemos ter uma template em forma de script envolvendo esta linha:
<script id="linkTemplate" type="text/x-jQuery-tmpl" >
<tr><td><a href="${address}"> ${title} </a> </td></tr>
</script>
Pois saiba que isto foi concebido como sintaxe do plugin jquery template (text/x-jQuery-tmpl).
Os dados
Os dados a serem apresentados na template acima (que estabelece um loop, fique bem claro) ficam num arranjo (array), apresentado a seguir:
<script type="text/javascript">
var links = [
{ title: "Google", address: "http://www.google.com/"},
{ title: "Copasa", address: "http://www.copasa.com.br/"},
{ title: "Intranet", address: "http://intranet/" }
];
</script>
A estrutura de conteúdo da página
Toda a página realmente será renderizada em uma DIV, cujo nome obrigatório é pageContent:
<div id="pageContent">
<table border=1><tbody id="relat"></tbody></table>
</div>
Juntando todas as peças:
<!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>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 1 - A DIV pageContent é a padrão para TODO o conteúdo da página, conteúdo "templatizado" -->
<div id="pageContent">
<table border=1><tbody id="relat"></tbody></table>
</div>
<!-- 2 - SEÇÃO DE TEMPLATES QUE GERAM HTML -->
<script id="linkTemplate" type="text/x-jQuery-tmpl" >
<tr><td><a href="${address}"> ${title} </a> </td></tr>
</script>
<!-- 3 - SEÇÃO DE DADOS A SEREM APRESENTADOS -->
<script type="text/javascript">
// Cria um array de links
var links = [
{ title: "Google", address: "http://www.google.com/"},
{ title: "Copasa", address: "http://www.copasa.com.br/"},
{ title: "Intranet", address: "http://intranet/" }
];
// 4 - EXECUTA AS TEMPLATES CONTRA OS DADOS E INJETA NA DIV pageContent
$("#linkTemplate").tmpl(links).appendTo("#relat");
</script>
</body>
</html>
Agora leia e compreenda este código. Veja que as bibliotecas jQuery e o seu plugin jQuery template precisam ser carregadas. Elas se encontram no site do jquery, facilmente localizado pelo Google.
Nenhum comentário:
Postar um comentário