Cargando

Ir a contenido


 


Backbone.js - Funciones Underscore

En este tutorial veremos las funciones de Underscore y como aplicarlas en la consola de JavaScript de Google Chrome.


Escrito por el may 04 2014 03:32 backbone


Underscore aparte de brindarnos el motor de plantillas para crear las vistas, también nos ofrece una cantidad de funciones que nos sirven de utilidades, con dichas funciones podemos lograr diferentes resultados desde simplemente saber cuántos elementos posee una colección hasta poder ordenar dicha colección por algún parámetro.

Iterar sobre una Colección

Para iterar sobre cada uno de los elementos de una colección podemos utilizar la función forEach, gracias a dicha función podemos recorrer una colección sin necesidad de establecer un mapa del contenido.

Veamos en el siguiente código como se puede utilizar:

var Todos = new Backbone.Collection();
Todos.add([
{ titulo: 'Ir a Belgica.', completado: false },
{ titulo: 'Ir a China.', completado: false },
{ titulo: 'Ir a Austria.', completado: true }
]);

Todos.forEach(function(model){
console.log(model.get('titulo'));
});

Establecemos una colección y luego sobre el objeto aplicamos forEach e imprimimos el atributo titulo de cada modelo, en pantalla obtendríamos algo similar a lo siguiente:


Ordenar por algún Atributo

En algún momento debemos ordenar los elementos por alguno de sus atributos o propiedades, para ello contamos con el método sortBy, si especificamos un atributo que contiene letras ordenará por el alfabeto, en cambio sí es numérico será por esta propiedad que ordene, veamos el siguiente ejemplo, mantendremos la colección del ejemplo anterior de forma que tengamos menos código que escribir:

var sortedByAlphabet = Todos.sortBy(function (todo) {
return todo.get("titulo").toLowerCase();
});
console.log("- Ahora Ordenado: ");
sortedByAlphabet.forEach(function(model){
console.log(model.get('titulo'));
});

Como vemos en la imagen obtenemos el siguiente resultado:



Mínimo y máximo

Para obtener los valores en ambos extremos de la colección, es decir, el valor mínimo o máximo, tenemos las funciones min y max, al aplicarlas podremos obtener los elementos correspondientes, veamos en el código como utilizar estas funciones:

Todos.max(function(model){
return model.id;
}).id;
Todos.min(function(model){
return model.id;
}).id;

Agrupar por un Atributo

El método groupBy nos permite agrupar los diferentes elementos que componen a la colección utilizando uno de sus atributos como propiedad, esto es bastante útil cuando por ejemplo queremos diferenciar entre estados de los atributos, en el código de ejemplo lo haremos por el campo de completado del modelo, veamos el código:

var Todos = new Backbone.Collection();
Todos.add([
{ titulo: 'Ir a Belgica.', completado: false },
{ titulo: 'Ir a China.', completado: false },
{ titulo: 'Ir a Austria.', completado: true }
]);

var porCompletado = Todos.groupBy('completado');
var completado = new Backbone.Collection(porCompletado[false]);
console.log(completado.pluck('titulo'));

Vemos que tenemos una colección donde dos de los 3 modelos tienen un mismo estado de completado, si quisiéramos solamente obtener dichos estados con el método groupBy podemos especificar dicha condición, primero declaramos una variable, aplicamos el método sobre la propiedad y luego generamos una segunda colección donde le indicamos que elementos agrupados va a traer, por último hacemos la impresión en la consola de JavasSript de Google Chrome y obtendremos los modelos correspondientes, veamos en la siguiente imagen lo que obtenemos:



Finalizando este tutorial hemos aprendido a utilizar varias funciones de Underscore que nos permiten interactuar de una mejor forma con los elementos que podamos tener en una colección dentro de nuestras aplicaciones.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado may 04 2014 03:32
  •   Actualizado may 07 2014 09:12
  •   Visitas 875
  •   Nivel
    Profesional



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse