← Vídeo anterior Vídeo siguiente →
Lo dejamos en el último video con un poco de desorden. Todo en un bloque de JavaScript, estábamos mezclando recuperación de datos, visualización y lógica comercial, y plantillas. En este video, vamos a comenzar a desglosar esas cosas para encaminarnos hacia un código más organizado, fácil de mantener y comprensible. Una gran parte de eso es la plantilla.
Toma el número 1 en nuestra aventura de plantillas con manubrios. Handlebars tiene un enfoque inteligente en el sentido de que el HTML de la plantilla se coloca literalmente en el HTML. Usas un especial <script> etiqueta. Es una creación agradable porque podemos alejarnos de la torpeza de la concatenación de cadenas (todas esas comillas y ventajas) y obtener el resaltado de sintaxis agradable para HTML que proporciona su editor. Nuestra plantilla finalmente se veía así:
<script id="movie-template" type="text/x-handlebars-template">
<div class="module module-movie" style="background-image: url({{movieImage}})">
<div class="movie-info">
<h3 class="movie-title">
{{movieTitle}}
</h3>
<p class="movie-director">
{{movieDirector}}
</p>
</div>
</div>
</script>Tenga en cuenta lo extraño type atributo en la etiqueta del script. Eso evita que se ejecute el contenido de esa etiqueta. En última instancia, Handlebars simplemente extrae las entrañas de esta etiqueta y la convierte en una función de plantilla. Una manera bastante inteligente de manejarlo realmente.
Esos pedacitos 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. Los manillares se denominan manillares, 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 plantilla de esta manera:
var source = $("#movie-template").html();
var template = Handlebars.compile(source);Entonces dentro de nuestro for bucle, 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 agregaremos 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 Pen diferente. Eso solo significa cómo probablemente dividiría su propio código en un proyecto real. Es casi seguro que la plantilla sería una “inclusión” de algún tipo.
Aquí es donde terminamos:
Vea el Pen mdCjJ de Chris Coyier (@chriscoyier) en CodePen
Hemos hecho algunos grandes avances aquí hacia un mejor código, pero tenemos más por hacer para que quede perfectamente limpio.