Cubrimos la creación de plantillas con manubrios en el último video. Pero Handlebars no es la única solución de plantillas en el bloque. En este video usaremos las plantillas disponibles en Underscore.
¿Por qué? Bueno, una de las razones es que es posible que ya esté usando Underscore en su proyecto. Es una biblioteca extremadamente popular porque, como jQuery, proporciona un montón de métodos útiles que funcionan en varios navegadores. Como ellos dicen:
Es la corbata que va junto con el esmoquin de jQuery y los tirantes de Backbone.js.
Si ya está usando Underscore, sería un gran incentivo para usar sus plantillas.
También en mi prueba rápida, Handlebars 1.0.0 tiene 14,2 KB en gzip y minificado y Subrayado tiene 4,9 KB en gzip y minificado. Manillar simplemente tiene más características (por ejemplo, comentarios, bucles, rutas, lógica, etc.). En nuestra demostración simple, no necesitamos esas funciones de todos modos, por lo que no es exactamente una comparación justa, pero bueno, solo estamos aprendiendo.
En lugar de tener la plantilla en HTML, necesitamos definir plantillas de subrayado en JavaScript. Volvemos a una concatenación de cadenas.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledluego se convierte en una función que podemos llamar con nuestro contexto de objeto de datos y devuelve el HTML completo con esos datos. Para ser eficientes, vamos a concatenar el HTML que regresa en una cadena grande para que podamos agregarlo al DOM solo una vez:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);En este video también resumimos la obtención de datos. Creamos una fuente JSON y usamos la función $ .getJSON () de jQuery para obtenerla. Como probablemente tendríamos que hacer en la "vida real".
$.getJSON("/path/to/json.js", function(data) ( ));Nuestro bucle for y lo que se basa en esos datos va en la devolución de llamada allí. O más probablemente, llama a alguna otra función bien nombrada para manejar eso, manteniendo las cosas claramente separadas.
Aquí es donde terminamos:
Vea el Pen IpAdn de Chris Coyier (@chriscoyier) en CodePen
Cabe señalar que LoDash es 100% compatible con lo que hemos hecho aquí. No estoy muy seguro de si la creación de plantillas de LoDash es mejor / más rápida / más lenta / peor que la de Underscore, pero cambié las bibliotecas y la demostración funcionó bien.