Cobrimos a modelagem com guiador no último vídeo. Mas o Handlebars não é a única solução de template no bloco. Neste vídeo, usaremos os modelos disponíveis no Underscore.
Porque? Bem, um dos motivos é que você já deve estar usando o Underscore em seu projeto. É uma biblioteca extremamente popular porque, como o jQuery, fornece vários métodos úteis que funcionam em vários navegadores. Como eles dizem:
É o laço que vai junto com o smoking do jQuery e os suspensórios do Backbone.js.
Se você já estiver usando o Underscore, isso seria um grande incentivo para usar o seu template.
Também em meu teste rápido, Handlebars 1.0.0 tem 14,2 KB gzipado e minificado e Underscore tem 4,9 KB gzipado e minificado. O guiador simplesmente tem mais recursos (por exemplo, comentários, loops, caminhos, lógica, etc.). Em nossa demonstração simples, não precisamos desses recursos de qualquer maneira, então não é exatamente uma comparação justa, mas tudo bem, estamos apenas aprendendo.
Em vez de ter o modelo no HTML, precisamos definir os modelos de sublinhado no JavaScript. Estamos de volta a alguma concatenação de strings.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledentão se transforma em uma função que podemos chamar com nosso contexto de objeto de dados e retorna o HTML todo preenchido com esses dados. Para sermos eficientes, vamos concatenar o HTML que retorna em uma grande string para que possamos anexá-lo ao DOM apenas uma vez:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Neste vídeo, também abstraímos a obtenção dos dados. Criamos uma fonte JSON e usamos a função $ .getJSON () do jQuery para obtê-la. Como provavelmente teríamos que fazer na “vida real”.
$.getJSON("/path/to/json.js", function(data) ( ));Nosso loop for e tal que depende dos dados vão no callback lá. Ou, mais provavelmente, chama alguma outra função bem nomeada para lidar com isso, mantendo as coisas bem separadas.
É aqui que terminamos:
Veja a Pen IpAdn de Chris Coyier (@chriscoyier) no CodePen
Deve-se notar que o LoDash é 100% compatível com o que fizemos aqui. Não tenho certeza se a modelagem LoDash é melhor / mais rápida / mais lenta / pior que a do Underscore, mas troquei as bibliotecas e a demo funcionou bem.