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