Backbone.Js: Trabalhando com modelos

Backbone.Js é uma biblioteca javascript realmente flexível que ajuda a estruturar seus aplicativos com desacoplamento de dados / visão, vinculação de dados e eventos.

E uma grande coisa é a camada Modelos , que foi feita para você gerenciar todos os seus dados. É muito fácil como você pode usá-lo, vamos ver um exemplo rápido:

var UserModel = Backbone.Model.extend({
  defaults: {
    firstName: '',
    lastName: '',
    birthDate: '' 
  }

});

var user = new UserModel({
  firstName: 'Bruce',
  lastName: 'Wayne',
  birthDate: '1980-02-19'
});

user.get('firstName'); // "Bruce"

Acabamos de criar um modelo simples para armazenar as informações dos usuários como você pode ver. Existem alguns atributos como o defaultsdo nosso modelo e vamos dizer que são todos os dados que temos do nosso servidor. Mas e se nossa visão exigir o fullnamedo usuário e também a data de nascimento em outro formato? Como lidar com isso?

Para cada camada de Backbone (como Modelos, Visualizações, Roteador, etc), podemos escrever um método chamado initializeque atuará exatamente como um construtor e será executado conforme instanciamos a classe. Neste
caso, queremos analisar os dados do nosso modelo para obter os atributos extras.

Vamos começar adicionando essas chaves extras em nosso modelo defaults:

var UserModel = Backbone.Model.extend({
  defaults: {
    firstName: '',
    lastName: '',
    birthDate: '',

    // extra information
    formatedDate: '',
    fullName: ''
  }

});

Apenas fazendo isso, você está garantindo que, mesmo se algo der errado no processo, a visualização nunca será interrompida ao tentar obter quaisquer undefineddados de nosso modelo.

Agora vamos criar o fullNameatributo:

var UserModel = Backbone.Model.extend({
  defaults: {
    firstName: '',
    lastName: '',
    birthDate: '',

    // extra information
    formatedDate: '',
    fullName: ''
  },

  initialize: function () {
    this.set('fullName', this.get('firstName') + ' ' + this.get('lastName'));
  }
});

var user = new UserModel({
  firstName: 'Bruce',
  lastName: 'Wayne',
  birthDate: '1980-02-19'
});

user.get('fullName'); // "Bruce Wayne"

Nosso fullNameagora está feito. A próxima etapa agora é o formatedDateatributo! Neste caso, queremos exibir o birthDateno formato de data brasileiro (dd / mm / AAAA), vamos escrevê-lo em uma linha simples de código:

var UserModel = Backbone.Model.extend({
  defaults: {
    firstName: '',
    lastName: '',
    birthDate: '',

    // extra information
    formatedDate: '',
    fullName: ''
  },

  initialize: function () {
    this.set('fullName', this.get('firstName') + ' ' + this.get('lastName'));
    this.set('formatedDate', this.get('birthDate').split('-').reverse().join('/'));
  }
});

var user = new UserModel({
  firstName: 'Bruce',
  lastName: 'Wayne',
  birthDate: '1980-02-19'
});

user.get('formatedDate'); // "19/02/1980"

Feito! Temos nossos dados exatamente como deveriam estar em uma linha simples de código. Eu também recomendaria escrever essa manipulação de dados em métodos diferentes entre si (o que logo será mais fácil de escrever testes para isso).

E a versão final seria assim:

var UserModel = Backbone.Model.extend({

  defaults: {
    firstName: '',
    lastName: '',
    birthDate: '',
    formatedDate: '',
    fullName: ''
  },

  initialize: function () {
    this.setFullName();
    this.setDate();
  },

  setFullName: function () {
    this.set('fullName', this.get('firstName') + ' ' + this.get('lastName'));
  },

  setDate: function () {
    this.set('formatedDate', this.get('birthDate').split('-').reverse().join('/')));
  }
});

var user = new UserModel({
  firstName: 'Bruce',
  lastName: 'Wayne',
  birthDate: '1980-02-19'
});

user.get('fullname'); // "Bruce Wayne"
user.get('formatedDate'); // "19/02/1980"

Conclusão

Como vimos, é muito fácil manipular dados usando o Backbone e é sempre bom manter essa lógica longe da camada de Visualização. A camada Modelos oferece muitos métodos úteis que podem ajudá-lo durante a construção de seu aplicativo. Você pode aprender mais na documentação oficial !

Você pode acompanhar minhas postagens no meu blog