Hoy por hoy la mayoría de los desarrolladores utilizamos JQuery como framework de capa de presentación que nos ayuda a simplificar y reducir las tareas que tenemos que realizar en entornos Web. Ahora bien también hay que recordar que el framework se centra en el manejo y manipulación de la capa de presentación (Arbol DOM). En este artículo vamos a hablar de Underscore.js que es un gran complemento para JQuery.
JQuery y Underscore
Cuando mas manejamos JQuery mas sencillo es darse cuenta que nos faltan algunas cosas fundamentales a nivel de Javascript .Quiza la mas importante es su capacidad para manipular datos . JQuery no dispone de funciones potentes para manejo de arrays y de estructuras JSON .¿Es esto un punto en su contra? .La realidad es justamente lo contrario . JQuery es un framework de presentación NO de negocio. Por lo tanto han decidido centrarse en una cosa y ser el mejor en ella . ¿Como podemos solventar nuestros problemas de manipulación de datos?. En este caso es relativamente sencillo , podemos utilizar la libreria Underscore.js (bajar de aqui) que esta centrada justamente en la gestión del negocio.
Vamos a ver un ejemplo en el que definimos una tabla y rellenamos la tabla utilizando una estructura JSON y Underscore.js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src="underscore.js">
</script>
<script type="text/javascript">
$(document).ready(function(evento) {
var listaPersonas= [{"nombre":"pedro","apellidos":"gonzalez","edad":20},
{"nombre":"maria","apellidos":"gomez","edad":30},
{"nombre":"david","apellidos":"sanchez","edad":40},];
//uso de underscore
_.each(listaPersonas,function(elemento) {
$("#tabla").append("<tr><td>"+elemento.nombre+"</td><td>"
+elemento.apellidos+
"</td><td>"+elemento.edad+"</td></tr>");
})
});
</script>
</head>
<body>
<table id="tabla">
</table>
</body>
</html>
Hemos usado el método each de underscore (_.each) para generar la tabla que se muestra a continuación:
Underscore y Filtrados
Supongamos que queremos añadir ahora una caja de texto con el campo nombre y un botón de filtrar. De tal forma que cuando introducimos un nombre y pulsamos se realice un filtrado por ese nombre .Si los datos JSON nos hubieran venido via AJAX podríamos hacer otra petición AJAX que nos filtre . Sin embargo todos podemos intuir que si ya tenemos los datos en el cliente deberiamos filtrar de forma directa y ahorrarnos peticiones . Esta operación la podemos realizar utilizando otro de los métodos de la librería underscore concretamente el método where .Vamos a ver como queda el código.
</pre>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src="underscore.js">
</script>
<script type="text/javascript">
$(document).ready(function(evento) {
var listaPersonas= [{"nombre":"pedro","apellidos":"gonzalez","edad":20},
{"nombre":"maria","apellidos":"gomez","edad":30},
{"nombre":"david","apellidos":"sanchez","edad":40},
];
_.each(listaPersonas,function(elemento) {
$("#tabla").append("<tr><td>"+elemento.nombre+"</td><td>"+
elemento.apellidos+"</td><td>"+elemento.edad+"</td></tr>");
})
$("#boton").click(function() {
$("#tabla tr").remove();
var listaFiltro=_.where(listaPersonas, {nombre:$("#nombre").val()});
_.each(listaFiltro,function(elemento) {
$("#tabla").append("<tr><td>"+
elemento.nombre+"</td><td>"+
elemento.apellidos+"</td><td>"+
elemento.edad+"</td></tr>");
})
});
});
</script>
</head>
<body>
<table id="tabla">
</table>
Filtrar :<input type="text" name="nombre" id="nombre"><input type="button" id="boton" value="aceptar" />
</body>
</html>
<pre>
El resultado de usar Underscore será el siguiente.
Hemos realizado un filtrado sin tener que recurrir a AJAX y manipulando unicamente el cliente.
[…] artículos relacionados: Utilizando Underscore.js , Ajax métodos globales ,JQuery find vs […]
Gran aporte Señor Cecilio Alvarez es una base para seguir investigando sobre este framework jquery, mi pregunta como lo utilizaria uno para realizar una consulta en una base de datos o en un archivo csv o txt
depende mucho de que tipo de base de datos .Local o remota .Si devuelve JSON o no 🙂 . Pero no será complicado ya que puedes hacer conversiones usando por ejemplo la funcion _.map() de underscore