Então mergulhamos em um exemplo de tabela de 2 colunas (o resto vem por consequência). O resultado esperado é:
Os detalhes apresentados ajudarão na compreensão dos parâmetros envolvidos no loop de uma template.
O arranjo
Os conteúdos apresentados vem da tabela javascript mostrada abaixo:
// Cria o arranjo com as informações
var books = [
{ abre: "1", ind: "esq", title: "A - Lista variáveis", link: "listavars6.php" },
{ ind: "dir", title: "1 - Parte 1", link: "Ato01.php", fecha: "1" },
{ abre: "1",ind: "esq", title: "2 - Parte 2", link: "Ato02.php" },
{ ind: "dir", title: "3 - Parte 3", link: "Ato03.php", fecha: "1" },
{ abre: "1",ind: "esq", title: "4 - Parte 4", link: "UsaFrase1_a.php" },
{ ind: "dir", title: "5 - Parte 5", link: "UsaFrase1_b.php", fecha: "1" }
];
Repare que, em se tratando de uma tabela com duas colunas, e que vamos percorrer coluna a coluna dos registros, a cada dois registros colocamos o campo "abre" com um valor qualquer (poderia ser "sim", "x", etc). E ao fim dos segundo registro do par, colocamos o campo "fecha", também com qualquer valor.
Também não existe problema em um par ficar incompleto, pois a nossa template "milagrosa" vai dar um jeito nisto.
A template milagrosa
<script id="bookTemplate" type="text/x-jQuery-tmpl" >
{{each(x,y) $data}}
<{{if x=="abre"}}tr{{else}}v{{/if}}>
{{if x=="link"}}
<td>${$index} _ ${x}|${y}=>${ind}-${$index}<A href="${y}"> ${title} </a></td>
{{/if}}
<{{if x=="fecha"}}/tr{{else}}v{{/if}}>
{{/each}}
</script>
Os comandos de tag do jquery template estão destacados em cor preta, para facilitar a sua identificação. Para começo de conversa, os comandos de tag SÓ FUNCIONAM DENTRO DOS SINAIS "<" E ">", coisa que não está explicada pelos "papas" do assunto na Internet, e que nos custou muito sangue para descobrir.
Abertura de uma linha
Para abrir uma linha, é preciso enviar a tag "<tr>". Já vimos que os sinais "<" e ">" precisam ficar do lado de fora da expressão, pois do contrário a interpretação das tags de jquery template apresenta o erro de "nodo não existe". Quando é feito o teste do "abre", a expressão acrescenta "tr" aos sinais citados. Mas quando o teste dá falso, aparecem os incômodos pares "<>" na tela, sem um nome de tag. A solução é acrescentar a tag "v", que não existe no HTML. Se a script é do tipo PHP, a tag "<v>" é ignorada na interpretação, pois não existe no DOM.
Se a tag "<v>" aparecer, acrescentamos nos estilos a definição:
V { color: white;}
que impede que o conteúdo dela seja visível, e o problema estará resolvido.
Por isto reproduzimos o teste de abre em tamanho grande a seguir:
<{{if x=="abre"}}tr{{else}}v{{/if}}>
Fechamento de uma linha
Para fechar uma linha, é preciso enviar a tag "</tr>". Já vimos que os sinais "<" e ">" precisam ficar do lado de fora da expressão, pois do contrário a interpretação das tags de jquery template apresenta o erro de "nodo não existe". Quando é feito o teste do "fecha", a expressão acrescenta "/tr" aos sinais citados. Mas quando o teste dá falso, aparecem os incômodos pares "<>" na tela, sem um nome de tag. A solução é a mesma citada no item anterior:
.<{{if x=="fecha"}}/tr{{else}}v{{/if}}>
Código completo da página
<!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.9.1.js"></script>
<script src="jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<style>
V {color:white;}
</style>
</head>
<body>
<div id="pageContent">
<table border=1><tbody id="relat"></tbody></table>
</div>
<!-- $y é o valor lido no momento -->
<script id="bookTemplate" type="text/x-jQuery-tmpl" >
{{each(x,y) $data}}
<{{if x=="abre"}}tr{{else}}v{{/if}}>
{{if x=="link"}}
<td>${$index} _ ${x}|${y}=>${ind}-${$index}<A href="${y}"> ${title} </a></td>
{{/if}}
<{{if x=="fecha"}}/tr{{else}}v{{/if}}>
{{/each}}
</script>
<script type="text/javascript">
// Cria o arranjo com as informações
var books = [
{ abre: "1", ind: "esq", title: "A - Lista variáveis", link: "listavars6.php" },
{ ind: "dir", title: "1 - Parte 1", link: "Ato01.php", fecha: "1" },
{ abre: "1",ind: "esq", title: "2 - Parte 2", link: "Ato02.php" },
{ ind: "dir", title: "3 - Parte 3", link: "Ato03.php", fecha: "1" },
{ abre: "1",ind: "esq", title: "4 - Parte 4", link: "UsaFrase1_a.php" },
{ ind: "dir", title: "5 - Parte 5", link: "UsaFrase1_b.php", fecha: "1" }
];
// Renderiza as linhas
$("#bookTemplate").tmpl(books).appendTo("#relat");
</script>
</body>
</html>
