Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. BackboneJS
Code

Visões do Backbone e o DOM

by
Length:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

Visão Geral

Visões do Backbone provêm convenção e abstração úteis para interfaces de usuário. Contudo, para incluir funcionalidades de UI em aplicações que o Backbone, por conta própria, não foi criado pra suportar, é preciso considerar como integrar efetivamente funcionalidade customizada ou de terceiros nela. Como resultado, desenvolvedores devem navegar pelos desafios e evitar conflitos complicado entre bibliotecas externas e o Backbone.

Introdução ao Backbone.js

Backbone é uma forma fantástica de organizar código no lado do cliente. Com abstrações como modelos, visões e coleções, o Backbone ajuda desenvolvedores sérios a escrever aplicações bem organizadas e escaláveis.

Embora haja várias alterantivas ao Backbone, incluindo Angular e Ember, o Backbone dá liberdade aos desenvolvedores a escreverem e organizarem seus códigos de forma natural e confortável sem ser muito opinativa sobre como o Modelo de Objeto do Documento (DOM) se parece.

A Pele das Visões do Backbone

Visões são um dos componentes mais poderosos e flexíveis do Backbone. De acordo com os autores dele:

Visões do Backbone são mais convenção que código — não determinam padrões de HTML ou CSS por você e podem ser usadas com qualquer biblioteca de modelagem em JavaScript.

Ela são usadas para manipular o que os usuários veem no navegador e facilitam a comunicação entre os modelos. Como resultado, no paradigam Modelo-Visão-Controlador, imagine as Visões do Backbone como ambos visão e controlador.

Isso implica seriamente ao desenvolver aplicações com interações significarivas de usuários. Na verdade, há várias situações onde pode-se querer usar outra biblioteca para manipular o DOM. Visualização de dados e jogos de navegador são dois exemplos onde se pode preferir ter outra biblioteca para manipular parte da renderização da visão dos usuários. Assim, pode-se escolher jQuery, d3.js, crossfilter ou three.js para algumas das manipulações do DOM.

Felizmente, há formas de fazer o Backbone trabalhar bem com esses outros manipuladores de DOM.

Manipulando o Modelo de Objeto do Documento no Backbone

Antes de continuarmos, revisemos a manipulação do DOM com Backbone. Comecemos com um objeto de visão básico.

Ótimo. Agora, digamos à visão para renderizar-se, definindo o método .render() .

Temos várias coisas acontecendo aqui. Vejamos passo-a-passo.

Definindo um Método .render() .

Primeiro, definimos um método .render() que encapsula a lógica necessária para renderizar o HTML. Note que o Backbone vem com um método .render() por padrão. Contudo, não significa muita coisa. Ele foi projetado para ser sobrescrito!

Obtendo Conteúdo HTML

O exemplo acima assume que obtemos o HTML de algum lugar. Podemos usar underscores _.template(). Anternativamente, podemos usar outras bibliotecas de modelagem, como a Handlebars (minha favorita). O que importa é que, de alguma forma, obtenhamos o conteúdo HTML.

O Que Seria Esse el?

Precisamos de um lugar para guardar o HTML. E é para isso que o el serve. Como o .render(), el é um atributo que vem por padrão com as Visões do Backbone. Ele referencia o elemento HTML (e todos seus filhos) presente na visão. No exemplo acima, não o especificamos. Por padrão, el é uma div. Contudo, poderíamos ter um elemento pai assim:

Também existe o $el, que apenas é o el envolvido pelo jQuery Depois veremos que $el tem um papel importante ao dominar as Visões do Backbone.

Retornando this...

Finalmente, retornarmos a referência do objeto em si, permitindo encadeamento. Embora não necessário, retornar this é convenção. Sem return this, precisaríamos acessar o conteúdo do HTML de alguma forma. O código abaixo ilustra uma solução alternativa.

Ihh, Nada Aparece na Tela!

Bom ponto. Embora tenhamos chamado .render(), ainda não vemos algo na tela—que coisa?!

Isso se dá por não termos interagiado com o DOM ainda. Tudo que fizemos foi gerar HTML e representá-lo em um objeto JavaScript chamado aView. Como não temos acesso ao HTML gerado, o que precisamos fazer é inserir o HTML no DOM do nosso aplicativo web.

Para continuar, criaremos um pequenos app que fará a visão aparecer assim que a página carregar. Abaixo temos o HTML e o JavaScript necessários:

Preparação do HTML

Eis O Que Temos no App.js

Abramos um servidor local/navegador, carreguemos a página e a aplicação deverá rodar!

Usando Backbone e jQuery Simultaneamente

A flexibilidade do Backbone permite-nos usar bibliotecas de terceiro para manipular o DOM. Um cenário é quando queremos usar jQuery e Backbone simultaneamente para manipular as visões. Abaixo temos o exemplo atualizado:

O código resultará em dois parágrafos na página. O primeiro parágrafo conteém "Some HTML". O segundo contém "Other HTML".

Para testar o conhecimento, invertamos as chamadas, assim:

O cüodigo acima resultará em um parágrafo: "Algum HTML". Em ambos os casos, há um elemento <p> com nada nele. Discutiremos isso em já-já.

Manipulando o DOM Eficientemente com Visões do Backbone

Entender a mágica da manipulação (travessia) eficiente do DOM requer entendimento de this.$el e this.$(). Ao usar this.$el, avaliamos a manipulação do DOM do conteúdo dentro da visão. Já com this.$(), avaliamos a travessia do DOM à arvore DOM dentro da visão.

Assim, no Backbone, usar $() (ao invés de this.$()) podem ser ineficiente. Por exemplo, digamos que queremos atravessar o DOM para encontrar um elemento. Podemoss usar quaisquer dos métodos de travessia do DOM, incluindo .find(), .children(), .closest(), .first(), e por aí vai.

Se soubermos, a priori, que o elemento procurado está no DOM da visão, devemos usar this.$(), evitando uma busca desnecessária num DOM maior. Se o elemento estiver fora do DOM da visão, temos de usar $().

Por exemplo, o método .specialRender() usa travessia localizada do DOM para garantir que buscamos elementos com a classe empty no contexto da visão. Se encontrada, faz o HTML desses elementos incluir um span e o texto "No longer empty".

Conclusão

Nese artigo, revisamos as Visões do Backbone, discutimos como renderizá-las no DOM e exploramos como fazer o Backbone trabalhar junto de outras biblotecas que queiramos usar para manipular o DOM. Também aprendermos sobre travessia localizada do DOM e identificamos métodos eficiente e ineficientes para atravessá-lo.

Na próxima parte, aprofundaremo-nos em exemplos mais complicados emcomo fazer múltiplas bibliotecas trabalharem juntas para manipular o DOM.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.