Classificando uma coleção Backbone.js

Se você conhece o Backbone.js, provavelmente sabe que ele oferece algo muito legal que são as coleções . Eles são uma espécie de invólucro para lidar com modelos de uma maneira fácil, fornecendo recursos incríveis, e um desses recursos é que você pode classificar esses modelos para trabalhar com eles. Vou falar sobre o comparatormétodo e o que ele pode te ajudar.

Vamos começar criando um pedaço de código, uma coleção de Backbone muito simples:

var CarsCollection = Backbone.Collection.extend();

var cars = new CarsCollection();

Muito bem,

agora temos nossa coleção pronta para adicionar alguns dados a ela:

var CarsCollection = Backbone.Collection.extend();

var cars = new CarsCollection();

cars.add({ name: 'Gol', year: 1998 });
cars.add({ name: 'Camaro', year: 2012 });
cars.add({ name: 'Palio', year: 2014 });
cars.add({ name: 'Ferrari', year: 2011 });
cars.add({ name: 'Fusca', year: 1998 });

Ok, agora nossa coleção tem alguns dados e pode fazer alguns truques, vamos começar recuperando apenas o atributo ano dela. Vamos usar o pluckmétodo, que basicamente pega um atributo da coleção e retorna em um array.

Então, o que temos é isto:

cars.pluck('year'); // [1998, 2012, 2014, 2011, 1998]
cars.pluck('name'); // ["Gol", "Camaro", "Palio", "Ferrari", "Fusca"]

Observe que pelo log do nome e do ano podemos ver que esta coleção está classificada da mesma forma que adicionamos os itens acima, vamos agora escrever seu comparatorpara fazê-la funcionar de uma maneira diferente:

var CarsCollection = Backbone.Collection.extend({
  comparator: function (a) {
    return a.get('year');
  }

});

var cars = new CarsCollection();

cars.add({ name: 'Gol', year: 1998 });
cars.add({ name: 'Camaro', year: 2012 });
cars.add({ name: 'Palio', year: 2014 });
cars.add({ name: 'Ferrari', year: 2011 });
cars.add({ name: 'Fusca', year: 1998 });

e agora pluckvamos ver o que aconteceu:

cars.pluck('year'); // [1998, 1998, 2011, 2012, 2014]
cars.pluck('name'); // ["Gol", "Fusca", "Ferrari", "Camaro", "Palio"]

Impressionante! Em uma linha de código muito simples, fizemos essa coleção ser classificada pelo atributo ano … Mas como isso funciona?

O comparatoré chamado toda vez que você adiciona um item de entrada à coleção ou chamando . Ele receberá automaticamente dois parâmetros, e esses são os modelos com os quais você pode comparar. No nosso caso, apenas tivemos que retornar o atributo escolhido e o Backbone resolveu. sort()

Mas digamos que precisamos de um pouco mais de lógica aqui, talvez se também precisarmos classificar esses carros em ordem alfabética pelo nome, como faremos isso?

Você pode ver que o comparador funciona de maneira muito semelhante com o , que basicamente você tem que retornar um número positivo, negativo ou 0 para uma classificação igual. Você pode ler mais sobre este método incrível aqui .Array.prototype.sort

Então, para fazer isso, nosso comparatordeve ser escrito assim:

var CarsCollection = Backbone.Collection.extend({
  comparator: function (a, b) {
      var year = a.get('year') - b.get('year');
      if (year === 0) {
          return a.get('name') < b.get('name') ? -1 : 1;
        }

      return year;
  }
});

var cars = new CarsCollection();

cars.add({ name: 'Gol', year: 1998 });
cars.add({ name: 'Camaro', year: 2012 });
cars.add({ name: 'Palio', year: 2014 });
cars.add({ name: 'Ferrari', year: 2011 });
cars.add({ name: 'Fusca', year: 1998 });

E agora, se nós plucknossos dados:

cars.pluck('year'); // [1998, 1998, 2011, 2012, 2014]
cars.pluck('name'); // ["Fusca", "Gol", "Ferrari", "Camaro", "Palio"]

Conseguimos! Agora nossos dados são classificados por ano e pelo nome do carro!

Primeiro subtraímos o aano pelo bano, e se o resultado não for zero (que seria zero se fossem iguais), apenas retornamos este resultado da subtração, por outro lado precisamos pegar o nome desses modelos e compará-los , retornando qual deveria estar em primeiro lugar do que o outro, e voilà fizemos exatamente o que queríamos.

Conclusão

O backbone tem muitos e muitos truques, e a melhor parte é que esses truques não são nada como mágica, se você entender o javascript, poderá ler rapidamente este código e em minutos saberá o que está acontecendo. Acredito que algum tipo de a classificação de dados deve estar no lado do servidor, mas se você precisar fazer isso no lado do cliente, também é fácil de fazer.

Se você quiser aprender mais sobre esses truques do Backbone, eu recomendo os Padrões e Técnicas de Backbone Avançados da Tutsplus .

Você pode acompanhar minhas postagens no meu blog