Ligação de dados
A interface do usuário ou IU é a parte de nossos aplicativos da web que apresentamos ao usuário final. Às vezes, queremos atualizar a IU para refletir as mudanças na entrada ou vice-versa. Para esta tarefa, podemos usar vinculação de dados . Isso significa que podemos conectar as alterações em um objeto à IU.
Por exemplo, se você tiver um campo de entrada Nome do funcionário, também poderá alterar os dados subjacentes. A maior parte da vinculação de dados é feita entre um aplicativo externo e um sistema de banco de dados subjacente. No entanto, agora temos ferramentas que nos permitem concluir a vinculação bidirecional diretamente no navegador da web. A vinculação bidirecional significa que as atualizações da IU e do modelo são mantidas em sincronia.
O gráfico abaixo mostra como a encadernação unilateral e bidirecional funciona.
 |
A palavra modelo no gráfico significa simplesmente o modelo de dados. Em nosso exemplo, usaremos um Nome do funcionário e Taxa como campos em nosso modelo. Quando são atualizados na IU, são atualizados no modelo (e vice-versa). Existem ferramentas como AngularJS, Knockout, Backbones, Derby ou Meteor. Essas ferramentas fornecem vinculação de dados integrada e sua própria sintaxe.
Data Binding em JavaScript
Você também pode realizar a vinculação em JavaScript nativo! Primeiro, vamos construir uma página HTML simples com algumas entradas. Quando o usuário insere dados nos campos, queremos atualizar dinamicamente a IU. É por isso que você verá que cada campo se repete. Não se preocupe, fará sentido quando chegarmos ao JavaScript real.
<html>
<head>
<title> Vinculação de dados em JavaScript </title>
<head>
<body>
<p> Nome do funcionário: <input class = "emp" type = "text"> </p>
<p> Saída : <input class = "emp" type = "text"> </p>
<p> Taxa: <input class = "rate" type = "text"> </p>
<p> Saída: <input class = " classifique "type =" text "> </p>
<script src =" bindMe.js "> </script>
</body>
</html>
Quando você abre esta página em um navegador, ela se parece com isto:
 |
Agora a parte divertida. O seguinte JavaScript pode parecer intimidador, mas quando examinado com cuidado, podemos ver como os dados são mantidos em sincronia com a IU. Lembre-se de que temos dois campos, cada um com a mesma classe e nome para Nome do funcionário e Taxa. O código JavaScript analisa isso e garante que ambos sejam mantidos atualizados.
var $ scope = {};
function bindMe () {
var boundClasses = ["emp", "rate"];
var attachEvent = function (classes) {
classes.forEach (function (thisClass) {
var elements = document.getElementsByClassName (thisClass);
for (var i in elements) {
elements [i] .onkeyup = function bindMe () {
for (var i em elementos) {
elements [i] .value = this.value;
}
}
}
Object.defineProperty ($ scope, className, {
set: function (newValue) {
for (var i in elements) {
elements [i] .value = newValue;
}
}
});
});
};
attachEvent (boundClasses);
} ();
Você não precisa necessariamente saber os detalhes de funcionamento de cada linha de código, já que pode pegar isso e modificar conforme necessário. Observe que nomeamos nossas duas classes emp e taxa. Eles são referenciados imediatamente quando declaramos um array para armazená-los. O código então percorre a matriz, procurando quando o usuário está digitando. Este é o evento ‘onkeyup’ no código. Sempre ou onde quer que um usuário esteja digitando, o modelo e a IU são mantidos atualizados simultaneamente.
Execute o aplicativo
Para testar isso, salve a página HTML como seu próprio documento. Em seguida, na mesma pasta, salve a fonte JavaScript como bindMe.js . Você pode então abrir a página HTML em um navegador da web. Quando você digita o nome de um funcionário, o campo Saída é atualizado conforme você digita. Em seguida, tente digitar no campo Saída. Observe que agora o campo Nome do funcionário será atualizado conforme você insere dados no outro campo! Você pode ver a ligação bidirecional em ação.
Resumo da lição
Uma interface de usuário, ou IU , é a informação exibida ao usuário final de seu aplicativo. Muito poucas UIs são estáticas, muitas têm dados por trás delas que podem mudar. Para conectar dados à IU, podemos usar vinculação de dados . Quando o modelo , ou dados por trás do aplicativo, são atualizados, a IU é atualizada (e vice-versa). Em JavaScript, existem algumas ferramentas que você pode usar para executar a vinculação, mas também pode ser feito corretamente em JavaScript nativo.