Jquery – Template

Category : JQuery, Smarty/Templates

Não é de hoje que existem ferramentas para template em JavaScript. O objetivo destas é facilitar a exibição de dados na interface, para evitar que você precise escrever o html dentro de um loop do JavaScript ou pior que isso, que você faça a resposta do lado do servidor e traga todo o html montado de lá.

Assim surgiram diversas ferramentas para ajudar nessa tarefa, hoje já existe diversas alternativas. Eu conhecia apenas o PURE, e hoje pesquisando sobre template em JavaScript para Jquery, achei isso no site do Jquery: http://api.jquery.com/jQuery.template/

Achei o plugin muito bacana, e muito simples de usar. Já faz um bom tempo que uso apenas JSON para transações ajax e este plugin faz exatamente o que eu preciso. Esta em beta ainda, mas já funciona muito bem. Vou tentar usar em algum site para valer, para verificar a estabilidade do danado.

Na página tem alguns exemplos de como usar, mas vou colocar aqui o teste que eu fiz:

 

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
 
$.getJSON('customerDetails.php',{responseType:'
    function(response){
        $.template(
            "customerList", 
            "<option value="${id_customer}">${name_first} ${name_last}</option>
        " );
        $.tmpl( "customerList", response ).appendTo( "#id_customer" );
    }
);

A resposta desta chamada JSON é um objeto neste formato:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
[
  {
    "id_customer":"1",
    "name_first":"Fulano",
    "name_last":"Siclano",
    "email":"fulano@gmail.com",
    "ddd_fone":"11",
    "fone":"5555-6666",
    "zip":"04444-444",
    "address":"Rua Que vai e volta",
    "number":"123",
    "neighborhood":"Jardim dos Bairros",
    "city":"Sao Paulo",
    "estate":"Sao Paulo",
    "cpf":"000.000.000-99",
    "status":"1",
    "data_record":"AAAA-MM-DD",
    "password":"123",
    "born_date":"AAAA-MM-DD"
  }
]

Como vêem é uma resposta JSON, com muito mais informação do que eu estou utilizando no template, porém ele faz o assign por chaves, e o processo fica bem simples.

Espero que isso entre logo na distribuição oficial do Jquery :)

Post a comment