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

Visões do Backbone e o DOM: Parte 2

by
Length:ShortLanguages:

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

file

No artigo anterior, cobrimos o básico das Visões do Backbone e como habilitar o jQuery para manipular sem problemas o mesmo DOM que o Backbone manipula.

Nesse artigo, exploraremos como fazer o Backbone trabalhar com o d3.js. Os conceitos nesse artigo aplicam-se a outras situações onde pretendemos usar o Backbone com outras bibliotecas que também manipulam o DOM.

Backbone + d3.js Trabalhando no Mesmo DOM

d3.js, criado por Mike Bostock, é outra biblioteca muito usada e que manipula o Modelo de Objeto do Documento, primariamente, para visualização de dados. Na verdade, podemos ser bem criativos na visualização dos dados.

No nível mais baixo, d3.js interage com elementos HTML e/ou SVG e manipula seus atributos vinculando dados ao DOM.

Eis um exemplo rápido da operção do d3:

O código acima faz o seguinte:

  1. Seleciona e cria uma referência ao elemento body
  2. Dentro da seleção, seleciona todos os elementos p da DOM
  3. Anexa cada elemento em numericalData a um elemento p selecionado
  4. Para cada elemento p que ainda não existir (algum elemento de numericalData que precisar ser anexados), cria um elemento p e o adiciona ao DOM
  5. Poe algum texto no nodo textual em cada elemento p novo (incluindo número relevante em numericalData)

Primeira Tentativa de Fazer Backbone e d3.js Trabalharem Juntas

Usando o que aprendemos no artigo naterior, eis uma implementação de manipulação compartilhada do DOM.

Houston, Temos Um Problema!

Assumindo que nosso objetivo é preservar o elementos p existente e adicionar outros ao DOM, ao executarmos o código, deparamo-nos com um grande problema.

O .render() insere um elemento p com o texto "I am not a number" no DOM. Mas .renderVisualization() seleciona todos os elementos p existente no DOM e insere conteúdo neles. Isso sobrescreve o texto no elemento p original, apesar do anexamento ao DOM usando d3.append().

Soluções para d3.js e Backbone Trabalharem Bem Juntas

Nesse exemplo simples, existem pelo menos duas soluções.

  1. Usar um seletor CSS mais específico
  2. Usar uma tag totalmente diferente

Cercando uma Porção do DOM

Para exemplos mais complicados, talvez precisemos de estratégias alternativas. Uma solução em potencial é cercar uma porção do DOM que será operada por uma das bibliotecas. Por exemplo:

No caso acima, Backbone continua a administrar a visão a ser criada. Contudo, digamos que haja um elemento no DOM (dentro ou fora do DOM administrado pela visão do Backbone), cujo id é "visualization". Podemos destacar esse fato limitar nossas manipulações do DOM relacionadas ao d3 a esse elemento. Assim, todos os métodos encadeados do d3, incluindo .selectAll("p") e .append("p"), serão executados no contexto de #visualization.

Encapsulando Manipulação do DOM Diferenciada com SubVisão

Por fim, outra abordagem para administrar funcionalidade de visão de terceiros é usando subvisão. Eis como pode ser:

Nesse cenário, subViewA pode conter conteúdo que *não* é de visualização e subViewB que é de visualização.

Outra Abordagem de Manipulação Compartilhada do DOM para Backbone + d3.js

Há vezes que precisamos garantir que a manipulação do DOM do d3 ocorra no mesmo contexto da do Backbone. Por exemplo, cercar uma porção do DOM com #visualization não garante que o elemento existe dentro ou fora do DOM representado pela Visão do Backbone.

Uma alternativa é garantir que o seletor inicial do d3 referencie o mesmo elemento que o apontado por this.$el. Contudo, se não configurar el ou quaisquer de seus atributos diretmente, será difícil marcar a visõ corrente usando CSS.

Por sorte, na biblioteca d3.js, existe um método que habilita seleção direta de nodo. Deixe-me apresentar o d3.select(node). Pela documentação, esse método:

Seleciona o nodo especificdo. Isso é útil se já existir uma referência a um nodo, como d3.select(this) dentro de um observador de eventos, ou uma variável global como document.body. Ess função não travessa o DOM.

O método permite-nos escrever o código abaixo e permitindo manipulações do d3 dentro do contexto da Visão do Backbone.

Conclusão

Em resumo, há várias considerações ao permitir a interação do Backbone com outros manipuladores de DOM.

  1. Tenha certa de selecionar o elemento certo para manipular. Classes CSS específicas e ids tornam a vida mais fácil.
  2. Uso inteligente de vários métodos de manipulação em cada biblioteca pode ir bem longe. Esclareça as ações DOM (append, prepend, insert, remove) que realmente precisa.
  3. Iterar sobre operações DOM pode ser difícil. Garante que os elementos certos são impactados.

Também existem inúmeras alternativas a se considerar, dependendo do que se deseja oter:

  1. Separar uma porção do DOM
  2. Limitar a manipulação do DOM da outra biblioteca ao contexto do Backbone.
  3. Usar subvisões pra encapsular o impacto dos outros manipuladores de 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.