As collections são coleções de modelos (models), portanto devemos adicionar modelos as coleções, veja exemplo abaixo.

//
// Instanciando uma coleção
//
var colecao = new Backbone.Collection();

console.log(colecao.length) // 0

//
// Adicionando modelos
//
colecao.add([{id: 1, firstName: 'john',   lastName: 'Lennon'}])
colecao.add([{id: 2, firstName: 'paul',   lastName: 'McCartney'}])
colecao.add([{id: 3, firstName: 'george', lastName: 'Harrison'}])
colecao.add([{id: 4, firstName: 'ringo',  lastName: 'Starr'}])

console.log(colecao.length) // 4

Também podemos definir a classe da coleção para ser, posteriormente, instanciada, veja exemplo abaixo. Repare que, além de utilizamos o método extend() do objeto Backbone.Collection, omitimos a palavra new. Ao definir a classe, aproveitamos para definir o método initialize().

//
// Definindo uma coleção
//
var Colecao = Backbone.Collection.extend({
    initialize:  function() {
        console.log('coleção inicializada');
    }
});

//
// Instanciando uma coleção
//
var colecao = new Colecao()

O código acima irá gerar a seguinte saída no console do navegador:

"coleção inicializada"

Também podemos criar uma coleção a partir de um array de modelos, veja o exemplo abaixo. Ele faz bastante sentido, pois se as collections são coleções de modelos, então teremos que criar alguns modelos antes de criarmos nossa coleção.

//
// Um modelo simples
//
var Beatle = Backbone.Model.extend({
    defaults: {
        job: 'musician'
    }
});

//
// Instanciando cada modelo
//
var john   = new Beatle({id: 1, firstName: 'john',   lastName: 'Lennon'});
var paul   = new Beatle({id: 2, firstName: 'paul',   lastName: 'McCartney'});
var george = new Beatle({id: 3, firstName: 'george', lastName: 'Harrison'});
var ringo  = new Beatle({id: 4, firstName: 'ringo',  lastName: 'Starr'});

//
// Criando nossa collection
// a partir de um array de modelos
//
var theBeatles = new Backbone.Collection([john, paul, george, ringo]);

Método get()

O método get() acessa um modelo específico, mas para isso precisamos definir a propriedade id.

var john = theBeatle.get(1);
console.log(john.attributes);
// Object { id: 1, firstName: "john", lastName: "Lennon" }

Visualizando a coleção

Uma maneira simples de visualizar a coleção no console do navegador é codificar (stringfy) os objetos no formato JSON, para isso execute o comando abaixo.

console.log(JSON.stringify(colecao.models));

O resultado do trecho acima é semelhante a...

"[{"id":1,"firstName":"john","lastName":"Lennon"},
  {"id":2,"firstName":"paul","lastName":"McCartney"},
  {"id":3,"firstName":"george","lastName":"Harrison"},
  {"id":4,"firstName":"ringo","lastName":"Starr"}]"

Percorrendo a collection

Por natureza, uma coleção pode ser iterada, ou seja, percorrida.

Podemos percorrer a collection com a função forEach(), veja exemplo abaixo.

//
// forEach()
//
theBeatles.forEach(function(model, index){
    console.log(index + " - " + model.get('lastName'));
});

Também podemos utilizar a função each() herdada da biblioteca underscorejs, veja exemplo abaixo.

//
// each()
//
theBeatles.each(function (model, index) {
    console.log(index + " - " + model.get('lastName'));
});

Ainda com a função each() da underscore, podemos utilizar de forma ligeiramente diferente, veja abaixo.

//
// each() - forma diferente
//
_(theBeatles.models).each(function(model, index){
    console.log(index + " - " + model.get('lastName'));
});

Para os puristas, podemos utilizar um simples laço for, veja abaixo.

//
// for
//
for (var i = 0; i < theBeatles.length; ++i) {
    console.log(i + ' - ' + theBeatles.at(i).get('lastName'));
}

Todos os exemplos acima chegam no mesmo resultado, veja:

"0 - Lennon"
"1 - McCartney"
"2 - Harrison"
"3 - Starr"

Repare que as propriedades index e id são distintas.

Ordenando a coleção

Ordenar uma coleção é uma funcionalidade muito útil, principalmente porte podemos escutar o evento sort, ou seja, a cada nova ordenação podemos executar uma função de callback.

Para ordernar a coleção precisamos evocar o método collection.sort, masantes disso é preciso dizer qual campo servirá de referência. Fazemos isso atribuindo um string com o nome do campo a propriedade comparator da coleção.

// Instanciando a coleção
var colecao = new Backbone.Collection();

// Adicionando os modelos
colecao.add([{id: 1, firstName: 'john',   lastName: 'Lennon'}])
colecao.add([{id: 2, firstName: 'paul',   lastName: 'McCartney'}])
colecao.add([{id: 3, firstName: 'george', lastName: 'Harrison'}])
colecao.add([{id: 4, firstName: 'ringo',  lastName: 'Starr'}])

Abaixo vemos a coleção em seu estado original.

//
// Estado original
//
console.log(JSON.stringify(colecao));
// "[{"id":1,"firstName":"john","lastName":"Lennon"},
// {"id":2,"firstName":"paul","lastName":"McCartney"},
// {"id":3,"firstName":"george","lastName":"Harrison"},
// {"id":4,"firstName":"ringo","lastName":"Starr"}]"

Abaixo vemos a coleção ordenada pela propriedade firstName.

//
// ordenado por `firstName`
//
colecao.comparator = "firstName";
colecao.sort();
console.log(JSON.stringify(colecao));
// "[{"id":3,"firstName":"george","lastName":"Harrison"},
// {"id":1,"firstName":"john","lastName":"Lennon"},
// {"id":2,"firstName":"paul","lastName":"McCartney"},
// {"id":4,"firstName":"ringo","lastName":"Starr"}]"

Abaixo vemos a coleção ordenada pela propriedade lastName. Coincidentemente, o resultado é igual ao anterior.

//
// ordenado por `lastName`
//
colecao.comparator = "lastName";
colecao.sort();
console.log(JSON.stringify(colecao));
// "[{"id":3,"firstName":"george","lastName":"Harrison"},
// {"id":1,"firstName":"john","lastName":"Lennon"},
// {"id":2,"firstName":"paul","lastName":"McCartney"},
// {"id":4,"firstName":"ringo","lastName":"Starr"}]"

Navegue nesta série!


Comentários

comments powered by Disqus