Si utilizamos handlebars, en algún momento se nos habrá pasado por la cabeza precompilar las plantillas evitando que el propio script de handlebars las compile al vuelo. Las ventajas son varias:
- Utilizaremos el script runtime de handlebars, que es más ligero:
handlebars.runtime-v1.3.0.js (16K)
handlebars-v1.3.0.js (89K) - Al eliminar la compilación en cliente, la ejecución también es mucho más rápido ya que la compilación es la parte más costosa de Handlebars.
Las ventajas anteriores cobran especial relevancia si trabajamos con dispositivos móviles.
Voy a partir del código que preparé en mi introducción a handlebars para mostrar como quedaría haciendo la precompilación de la template:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Prueba Cors</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="handlebars-v1.3.0.js"></script> </head> <body> <div id="futbolistas"> <button id="enviar">Ver futbolistas</button> </div> <script id="entry-template" type="text/x-handlebars-template"> {{#each futbolistas}} <h1>{{nombre}} {{apellido}}</h1> <p>Posición: {{posicion}}</p> <p>Equipo: {{equipo}}</p> <p>{{desc}}</p> {{/each}} </script> <script> $("#enviar").click(function(mievento) { $.ajax({ type: 'GET', "url": "http://www.media.formandome.es/phonegap/tutorial/futbolistas.php", "dataType": "json", success: function(data) { var datos ={}; datos.futbolistas = data; //Compilamos el template: var source = $("#entry-template").html(); var template = Handlebars.compile(source); var futbolistas = template(datos); $("#futbolistas").html(futbolistas); } }); }); </script> </body> </html> |
Para compilar plantillas mediante handlebars tenemos que tener instalado el software, el comando en Linux sería:
|
1 |
$ sudo npm install -g handlebars |
El software se instala mediante el gestor de paquete npm que viene por defecto en node.js. El parámetro -g indica que se instala para todo el sistema, por eso tenemos que instalar mediante sudo en Linux. Si tu equipo no tiene instalado el paquete npm, instrucciones de instalación de nodejs para distribuciones de Ubuntu anteriores a la 14.04
Posteriormente haríamos la precompilación mediante el comando:
|
1 |
$ handlebars <input> -f <output> |
Lo suyo sería crear una carpeta donde guardar todas las plantillas, yo la llamaré templates.
En mi caso la compilación sería mediante:
|
1 |
$ handlebars templates/ -f js/templates.js |
Sin embargo al precompilar las planatillas nos puede dar error ya que por defecto npm instala la última versión de handlebars y la que nos hace falta es la 1.3:
|
1 |
handlebars.js Uncaught TypeError: Object #<Object> has no method 'call' |
Desinstalamos la última e instalamos la 1.3:
|
1 2 3 4 5 6 |
juanda@juandapc:/var/www/ejercicios/PHONEGAP/ejercicio2_solucionado$ sudo npm uninstall handlebars -g [sudo] password for juanda: unbuild handlebars@2.0.0-alpha.2 Instalamos la versión adecuada mediante: juanda@juandapc:/var/www/ejercicios/PHONEGAP/ejercicio2_solucionado$ sudo npm install handlebars@1.3 -g |
Ahora modificaríamos el código de nuestro documento html eliminando la compilación y cambiando la librería de handlebars. Haremos referencia al template compilado mediante Handlebars.templates.futbolistas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Prueba Cors</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="handlebars.runtime-v1.3.0.js"></script> <script type="text/javascript" src="templates.js"></script> </head> <body> <div id="futbolistas"> <button id="enviar">Ver futbolistas</button> </div> <script> $("#enviar").click(function(mievento) { $.ajax({ type: 'GET', "url": "http://www.media.formandome.es/phonegap/tutorial/futbolistas.php", "dataType": "json", success: function(data) { var datos ={}; datos.futbolistas = data; var futbolistas = Handlebars.templates.futbolistas(datos); $("#futbolistas").html(futbolistas); } }); }); </script> </body> </html> |
La plantilla de handlebars en el fichero /templates/futbolistas.handlebars quedaría así:
|
1 2 3 4 5 6 |
{{#each futbolistas}} <h1>{{nombre}} {{apellido}}</h1> <p>Posición: {{posicion}}</p> <p>Equipo: {{equipo}}</p> <p>{{desc}}</p> {{/each}} |