Vistas em BackboneJS

O que são as vistas e como nos ajudam à hora de criar aplicações web e como BackboneJS as aproveita para associá-las a modelos e coleções que contém dados que podem mudar dinâmica e automaticamente.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 15/11/13
Valorize este artigo:
Agora vamos tratar de introduzir as vistas e explicar as vantagens oferecidas em BackboneJS. Este é um artigo do Manual de BackboneJS, que você entenderá se leu os capítulos anteriores.

Conhecendo as vistas poderemos entender finalmente como todas as "engrenagens" que nos oferece BackboneJS para o desenvolvimento web funcionam, ligados entre si pelo sistema de eventos, para realizar aplicações complexas com maior facilidade.

Vistas em geral

As vistas contêm a parte do código que serve para apresentar a informação. Como estamos desenvolvendo web, as vistas vão conter o código HTML que temos que gerar para apresentar os dados na página.
Este é outro dos elementos chave de BackboneJS e de qualquer sistema que trabalhe com base de padrões de desenho de software MVC. Na verdade, em nossas aplicações web, vamos trabalhar mais com os modelos e as vistas. Já sabemos que os modelos servem para armazenar os dados e as vistas que servem para mostrá-los no código HTML.

Se quisermos ver dessa maneira, as vistas são uma abstração de como vamos ver os dados na nossa página. Pensando em um website, poderíamos ter uma vista geral que nos salva o "layout" sobre o conteúdo que vai ter toda a página. Porém, se desejarmos fazer um pouco mais modular, poderíamos ter uma vista geral e outra serie de vistas filhas, que contêm cada um dos elementos da página, por exemplo, uma para o buscador, outra para o quadro de últimos artigos publicados, outra para o de login de usuários, etc.

Potência das vistas em BackboneJS

O sistema de vistas, ademais, se conecta com os modelos, de modo que podemos mostrar os dados desses modelos nas vistas. No entanto, além disso, há determinadas vistas que poderemos lincar com coleções ao invés de modelos para mostrar um conjunto de dados. Por exemplo, nos comentários de artigos poderíamos ter lincada uma coleção com todos os modelos dos comentários que devem aparecer. Ou seja, em nossa vista de comentários teríamos associada uma coleção onde cada comentário seria cada um dos modelos da coleção.
Seguindo esse exemplo dos comentários, quando um usuário faz um comentário na página e pressiona "submit", desde o ponto de vista de BackboneJS, estaríamos fazendo um "save", que mandaria esse comentário ao servidor. Ademais, poderíamos estar fazendo um "fetch" na coleção que atualizaria os comentários com os dados que haja no servidor atualmente. Estas mudanças nos modelos e nas coleções estariam lançando eventos os quais, por sua vez, estariam sendo escutados pelas vistas para atualizar seu conteúdo.

Enfim, se uma vista detecta que houve mudanças nos modelos ou coleções que têm associados, poderia ser atualizada automaticamente, mostrando o conteúdo novo, onde pode ser que já não haja os mesmos elementos, pois talvez se tenham agregado novos ou se eliminaram alguns antigos. Tudo isto nos permite ter vistas que são perfeitamente dinâmicas, sem ficarmos loucos atualizando seu conteúdo manualmente desde mil sites no código da aplicação.

Não é um motor de layouts

Para não nos equivocarmos, tal como estão implementadas as vistas em BackboneJS, cabe assinalar que não são o que poderíamos entender como um motor de layouts. Ou seja, com as vistas em Backbone não vamos determinar o HTML ou o CSS de nossa página, podemos deixar isso nas mãos de nosso motor de layouts preferido, mas não em Backbone.JS.

Então, o que exatamente está implementado nas vistas de Backbone.js? Simplesmente são classes que o sistema de vistas genérico de Backbone amplia e no que indicamos os eventos que vão escutar ou produzir, os modelos ou coleções com os que estão lincados, etc. Ou seja, o que basicamente nos serve para implementar todo o sistema de sincronização com os modelos e propagação de eventos.

Embora não seja um sistema de layouts , as vistas continuam sendo as responsáveis por renderizar HTML na página. Para isso existirá um método que se chama render() que tem a ver com a criação de HTML e com a manipulação do DOM, que se chama cada vez que se tem que refrescar a vista. Nesse método deveríamos produzir o HTML de nossa vista pelos meios que desejemos, ainda que o lógico seja usar algum template engine que nos agrade e nos facilite o trabalho.

Mais adiante nos dedicaremos a dar exemplos concretos com código e obteremos mais informação das vistas. No momento, o importante é que tenhamos podido esclarecer conceitos e entender as possibilidades que nos oferece o framework BackboneJS.






Usuários :    login / registro

Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato