Two way data binding

Como implementar?

Henrique Custódia
Dec 23, 2016 · 4 min read

Minha caminhada com Javascript é bem breve. Assim como a maioria das pessoas, após aprender o bom e velho Vanilla, procurei um framework que pudesse me ajudar a desenvolver aplicações mais complexas de forma mais ágil.

Após pesquisar um pouco, encontrei o famoso Angular da Google que tinha uma proposta um tanto nova…o conhecido hoje, Two Way Data Binding!

Hmm, mas o que é Two Way Data Binding?

Two Way Data Binding pode parecer um pouco confuso no início, para aqueles que estão acostumados com a forma que Vanilla ou JQuery leva os dados do Javascript para o DOM e do DOM para o Javascript.

Pois bem, a proposta principal do Two Way Data Binding é automatizar esse trafego de dados, de tal forma que o desenvolvedor não precise mais criar handlers no DOM para atualizar o Javascript e vice versa. Assim, quando um valor no DOM mudar, o Javascript responsável por aquele DOM também vai será atualizado com o respectivo valor automaticamente sem precisar adicionar qualquer handler, como por exemplo:

// HTML

Parece algo complicado, né? Mas na verdade é bem simples de ser implementado. :)

A imagem a baixo é um fluxograma de como funciona a lógica de atualização dos dados com Two Way Data Binding:

A imagem a cima cita duas palavras chaves: View e Model.

Nesse escopo, View seria o DOM e Model seria o Javascript responsável por controlar o fluxo de dados para o DOM.

Maneiro, mas e o código? Cadê?

Depois dessa breve introdução ao conceito dessa tecnologia, chegou a hora implementar nosso próprio Two Way Data Binding! Bora codificar!

Crie um arquivo html com o seguinte conteúdo:

<input my-input=”name”>

Como você pode ver o atributo my-input é um atributo customizado e será usado para manipular os valores de entrada quando digitamos algo no campo input.

Adicione a tag script abaixo do campo input, pois vamos adicionar nosso código js dentro delas (isso é uma má prática, então não faça isso no mundo real).

Dentro da tag script, será preciso buscar o elemento que contém o atributo my-input para que possamos “escutar” os valores que são passados para esse elemento. Adicione o seguinte Javascript:

var model = {};

O código a cima apenas busca o elemento que contém o atributo my-input e após recuperar sua referência, pega o valor que o atributo contém, que nesse caso é o valor “name” (conforme colocamos no html). Esse valor “name” será a propriedade que será modificada no model, que como podemos ver no Javascript a cima…é apenas um Objeto.

Usaremos o evento keyup para atualizarmos em tempo real o model.

Legal, mas como refletir as alterações do Model no DOM?

Quando estava desenvolvendo o meu próprio Two Way Data Binding, fiquei algum tempo refletindo sobre essa parte.

Afinal, como fazer com que o model saiba quando deve atualizar o DOM?

Depois de um tempo pesquisando, resolvi usar o watch do Javascript que funcionou muito bem para essa necessidade!

Agora que sabemos o que usar para implementar essa necessidade, vamos botar a mão na massa!

Adicione logo abaixo do elemento que contém o my-input, um novo elemento contendo o atributo my-output.

<span my-output="name"></span>

O atributo my-output será o responsável por refletir no DOM as alterações feitas na propriedade “name” do Model.

Agora precisamos adicionar o código Javascript responsável por assistir o model e alterar o DOM quando algo mudar.

var output = document.querySelector('[my-output]');   

Como se pode ver no código a cima, a única coisa que mudou foi a utilização do método watch, que rodará o callback cada vez que a propriedade “name” do Model mudar seu valor.

Agora cada vez que você digitar algo no elemento contendo o atributo my-input, o mesmo valor será refletido no html do elemento contendo o atributo my-output!

É só isso?!

Sim, realmente é bem simples implementar um Two Way Data Binding. Lógico que esse código criado pode ser melhorado e muito! Mas o foco aqui, é manter a simplicidade para o entendimento geral de como as coisas funcionam.


No meu Github contém o repositório com esse tutorial simplificado e refatorado caso seja útil para algo.

Recomende isso para mais alguém, se você gostou. É sempre bom compartilhar conhecimento!

Muito obrigado e por hoje é isso :)

criciumadev

Comunidade de desenvolvedores do Sul de Santa Catarina

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store