Paramos no último vídeo com um pouco de confusão. Tudo em um bloco de JavaScript, estávamos misturando recuperação de dados, exibição e lógica de negócios e modelagem. Neste vídeo, vamos começar a dividir essas coisas para nos colocar em nosso caminho para um código mais organizado, sustentável e compreensível. Uma grande parte disso é a modelagem.
O primeiro lugar em nossa aventura de modelagem é o guiador. Handlebars tem uma abordagem inteligente em que o HTML para o modelo é literalmente colocado no HTML. Você usa uma etiqueta especial . É uma boa autoria porque podemos nos livrar da falta de jeito da concatenação de strings (todas aquelas aspas e acréscimos) e obter o bom destaque de sintaxe para HTML que seu editor fornece. Em última análise, nosso modelo se parecia com este:
((movieTitle))
((movieDirector))
Observe o typeatributo estranho na tag do script. Isso evita que o conteúdo dessa tag seja executado. No final das contas, o Handlebars apenas arranca as entranhas dessa tag e a transforma em uma função de modelo. Uma maneira muito inteligente de lidar com isso.
Essas partes ((movieTitle))são as partes importantes. Por fim, passamos um objeto para a função de modelo que é criada, e as propriedades desse objeto correspondem a esses bits de espaço reservado. O guiador é denominado guiador, presumivelmente, porque esses bits de espaço reservado são envolvidos em chaves que se parecem um pouco com o guiador visto de cima.
Seguindo o tutorial simples no site do Handlebars, criamos nossa função de modelo assim:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Então, dentro de nosso forloop, chamamos nossa nova função de modelagem com o objeto (o contexto) que contém um único filme. O HTML será retornado e o anexamos à página.
var html = template(data.movies(i)); $("#movies").append(html);Também pegamos o modelo neste vídeo e o filmamos em uma caneta diferente. Isso apenas significa como você provavelmente dividiria seu próprio código em um projeto real. O modelo quase certamente seria um “incluir” de algum tipo.
É aqui que terminamos:
Veja a Pen mdCjJ de Chris Coyier (@chriscoyier) no CodePen
Fizemos bons avanços aqui em direção a um código melhor, mas temos mais a fazer para deixá-lo perfeitamente limpo.