read

Backbone.js é um framework Javascript que facilita a manipulação de dados no front end de uma aplicação web, separando a visualização da manipulação dos dados. Para isso, fornece componentes para uma estrutura MVC, são eles: Model, View e Collection.

Configurando um projeto com Backbone.js

A única dependência do Backbone.js é a biblioteca Underscore. Para uma simples utilização do framework, basta utilizar a biblioteca dentro do seu HTML.

Backbone.Model

Modelos são componentes que possuem uma estrutura para manipulação de dados.

Abaixo, um exemplo simples de criação de um modelo:

Para manipular os atributos de um modelo, utilizamos os métodos get() e set(). Vejamos um pouco mais abaixo:

Podemos definir valores padrão para os atributos dos modelos, além de poder manipular dados no momento da inicialização de um modelo.

Backbone.View

O componente View é utilizado para organizar a lógica de interface.

Abaixo, um exemplo simples de criação de uma View:

Para iniciar a View:

O atributo el representa o elemento DOM que a View utilizará para renderizar o layout. Existem outros dois atributos que podem ser utilizados para definir o DOM a ser utilizado pela View, são eles: tagName, id e className.

Neste caso, o elemento DOM utilizado pela View será um div com a classe projects.

Como foi dito anteriormente, o objetivo da View é organizar a lógica de interface utilizando os dados contidos em modelos. A seguir, um exemplo da View fazendo uso de dados contidos no Model.

Para este exemplo, temos o resultado abaixo:

Outro recurso bastante utilizado para exibição de dados é a biblioteca de templates. Abaixo, passamos a utilizar templates para renderizar as informações do projeto.

No exemplo acima, utilizamos a biblioteca de templates do próprio Underscore. Porém, pode ser utilizada qualquer biblioteca de templates, como por exemplo Mustache.

Uma funcionalidade bastante comum nas Views é a utilização de eventos, que são definidos através de um hash chamado events. Veja mais abaixo:

Este post é uma sequência de posts sobre o funcionamento do framework Backbone.js. Na sequência, explicaremos o funcionamento de Collections e integração com projetos REST.