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:
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:
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:
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:
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.
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.
