Lo dejamos en el último video con un poco de lío. Todo en un bloque de JavaScript mezclamos recuperación de datos, visualización y lógica empresarial, y creación de plantillas. En este video, comenzaremos a dividir esas cosas para que podamos encaminarnos hacia un código más organizado, fácil de mantener y comprensible. Una gran parte de eso son las plantillas.
Tome el primer lugar en nuestra aventura de plantillas con Handlebars. Handlebars tiene un enfoque inteligente en el sentido de que el HTML de la plantilla se coloca literalmente en el HTML. Usas una etiqueta especial . Es una buena creación porque podemos alejarnos de la torpeza de la concatenación de cadenas (todas esas comillas y ventajas) y obtener el atractivo resaltado de sintaxis para HTML que proporciona su editor. Nuestra plantilla finalmente se ve así:
((movieTitle))
((movieDirector))
Tenga en cuenta el typeatributo extraño en la etiqueta del script. Eso evita que se ejecute el contenido de esa etiqueta. En última instancia, Handlebars simplemente saca las entrañas de esta etiqueta y la convierte en una función de plantilla. Una forma bastante inteligente de manejarlo realmente.
Esos bits como ((movieTitle))son las partes importantes. En última instancia, pasamos un objeto a la función de plantilla que se crea, y las propiedades de ese objeto coinciden con estos bits de marcador de posición. El manillar se llama manillar, presumiblemente, porque esos bits de marcador de posición están envueltos en llaves que se parecen un poco a los manillares desde arriba.
Siguiendo el sencillo tutorial en el sitio web de Handlebars, creamos nuestra función de plantillas como esta:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Luego, dentro de nuestro forciclo, llamamos a nuestra nueva función de plantilla con el objeto (el contexto) que contiene una sola película. Se devolverá el HTML y lo adjuntaremos a la página.
var html = template(data.movies(i)); $("#movies").append(html);También tomamos la plantilla en este video y la filmamos en un lápiz diferente. Eso solo significa cómo probablemente dividiría su propio código en un proyecto real. Es casi seguro que la plantilla sea una "inclusión" de algún tipo.
Aquí es donde terminamos:
Vea el Pen mdCjJ de Chris Coyier (@chriscoyier) en CodePen
Hemos hecho algunos buenos avances aquí hacia un mejor código, pero tenemos más por hacer para que quede perfectamente limpio.