Trabalho com formulários em Knockout.js

Os formulários são parte integrante de qualquer aplicação ou página web, visto que é um dos meios que nos permite obter os dados do utilizador de forma nativa, o que torna o seu processamento uma tarefa muito comum.
Knockout.js nos permite trabalhar com seu objeto ligação de dados todos os elementos que podem constituir um formulário, dando a possibilidade de poder validar, disparar eventos, atribuir observáveis, etc. Isso torna o processamento de formulários do lado do cliente viável e, portanto, adicionamos uma camada adicional de validações antes que ele atinja o lado do servidor.
RequisitosNós só precisaremos ter Knockout.js em nosso sistema e acessível aos aplicativos que vamos criar, permissões para escrever arquivos, uma conexão com a Internet para obter as bibliotecas se não as tivermos e um editor de texto como Texto Sublime ou Bloco de notas ++. Para executar os aplicativos, precisamos de um tipo de servidor web Apache ou Nginx em nosso ambiente de teste.
Antes de passar para exemplos com casos que podemos aplicar, é muito importante conhecer o vínculos de dados que pode trabalhar com os elementos da forma de nosso aplicativo, desta forma podemos começar a ter uma ideia do que podemos e não podemos alcançar, especialmente as maneiras de obter os resultados de que precisamos para fazer nosso aplicativo funcionar corretamente:
Valor de ligação de dadosIsso é usado nos valores ou elementos de entrada de seleção, eles podem ser os elementos de entrada, textarea ou select, com isso podemos capturar o valor do elemento no momento em que precisamos usá-lo.
Data-bind textInputleste obrigatório é usado com os elementos input e textarea, sua função é semelhante a valor Porém, se atribuirmos um observável a ele, podemos capturar os valores conforme o usuário interage com o elemento, ao contrário do valor que nos dá o valor quando o elemento muda, por exemplo, quando perde o foco.
Data-bind verificadoÉ usado com elementos do tipo caixa de seleção Y botões do rádioComo o próprio nome indica, permite estabelecer ou saber se um elemento é selecionado em uma estrutura que utiliza os elementos mencionados.
Opções de ligação de dadosUsando este obrigatório Podemos preencher um elemento select com as opções que irá apresentar no formulário, é perfeito quando queremos fazer um catálogo de opções de forma dinâmica.
SelectOptions vinculado a dadosTambém exclusivo para o elemento select, é usado quando precisamos definir as opções selecionadas ao definir a propriedade multi, já que precisamos escolher mais de uma opção por vezz.
Ativar / desativar vinculação de dadosEle nos permite habilitar ou desabilitar qualquer um dos diferentes elementos do formulário, com isso podemos remover um elemento se não for necessário usá-lo no fluxo da aplicação em qualquer condição particular, onde habilitar serve para habilitar e desabilitar desativar, caso não saibamos o significado de cada palavra.
O mais interessante deles vínculos de dados é que eles funcionam de duas maneiras, ou seja, quando há uma mudança em um elemento, podemos recebê-lo em nossa visualização do modelo e fazer algum processamento se necessário, mas também se tivermos um observável e quisermos fazer algo a partir do aplicativo para o formulário também podemos sem qualquer tipo de problema, desde que estejamos usando o ligação de dados adequado para o tipo de elemento de formulário, uma vez que Knockout.js ele não interpretará instruções erradas como um navegador com código faria HTML.
Vamos agora ver um exemplo prático de como podemos usar todos os conceitos de que falamos na seção anterior deste tutorial, vamos criar um elemento do tipo textarea que aceitará apenas 140 caracteres, visto que existe essa restrição, devemos informar ao usuário quantos caracteres ele deixou ao escrever.
A lógica que usaremos é muito simples, vamos incluir o data-bind textInput no elemento textarea de nosso formulário, então em nossa visão de modelo vamos defini-lo como um observável, e então podemos começar a capturar os caracteres enquanto o usuário está digitando. Finalmente, usamos um elemento computado Para criar um composto observável com o total dos personagens restantes, no momento não vamos forçar o usuário a escrever menos, apenas informamos sobre os personagens. Vejamos o código do nosso exemplo:

 Formulários em knockout.js
Insira um texto

Caracteres restantes: 

Deve-se notar que não usamos o valor de ligação de dados porque precisamos que a alteração da quantidade de caracteres restantes ocorra no momento em que o usuário digita, pois do contrário poderíamos apenas indicar a quantidade no momento em que ele passa para outro elemento e isso não seria o ideal para o que estamos almejando ao usar Knockout.jsPorém, haverá casos em que este tipo de comportamento será necessário, tudo depende do que a nossa aplicação necessita. Então, vamos ver como fica nosso exemplo quando o executamos no navegador:

Claro, aqui não podemos ver dinamicamente como nosso contador desce, mas quando escrevemos nosso contador de caracteres restantes, ele é atualizado conforme está escrito no elemento textarea do formulário:

Outro aspecto que frequentemente precisamos em nossos aplicativos ao trabalhar com formulários são os eventos, já que com eles podemos acionar ações quando o usuário faz algo em particular, como um clique, ou passar o mouse sobre uma seção específica de nosso HTML. Vamos ver alguns dos eventos que podemos usar em nossos formulários:
Enviar eventoEste evento só pode ser usado no elemento Formato, e é ativado apenas quando o usuário envia o formulário ao servidor, por meio de um envio de entrada ou com algum outro método.
Clique no eventoEste evento é um antigo conhecido, como o seu nome indica, é ativado quando clica num elemento da nossa aplicação.
Evento HasFocusEste evento é disparado quando um elemento geralmente input, textarea ou select é selecionado pelo usuário e está ativo naquele momento.
Também existe a possibilidade de utilizar outros eventos que estão disponíveis no SOL como por exemplo passe o rato por cima, pressione o botão a fim de estender a funcionalidade de nossa visualização do modelo a esses níveis.
No exercício a seguir vamos aplicar o conhecimento dos eventos que adquirimos, vamos criar um pequeno formulário onde teremos uma lista, e cada vez que passarmos o mouse sobre uma opção, uma imagem será exibido, é claro que esta será uma implementação demonstrativa e não é adequada para produção, no entanto, nos ajuda a entender no que estamos trabalhando.
Neste caso, precisaremos adicionalmente Knockout.js a biblioteca de jQuery para usar alguns efeitos em nosso aplicativo, então o ideal é baixá-lo e salvá-lo na mesma pasta ou diretório em que temos Knockout.js, ou talvez usá-lo de seu CDN oficial. Vamos ver então o código de que precisamos:

 Formulários em knockout.js

Aqui o que simplesmente fizemos é criar uma lista de coisas com uma descrição e uma imagem, esta imagem pode estar em qualquer lugar acessível pelo aplicativo, neste caso escolhemos seu diretório raiz, então criamos uma função que adiciona a imagem a um seletor com jQuery para que possamos mostrar o mesmo no SOL.
Na parte de HTML vemos que criamos uma lista com os elementos pertencentes à lista material e finalmente indicamos que o evento é passe o rato por cima e a função a ser executada quando esse evento ocorrer. Vamos ver como fica nosso aplicativo quando o executamos em nosso navegador:

Então, se movermos o cursor do mouse para alguns dos textos, a imagem correspondente será carregada e podemos ver a funcionalidade do nosso exemplo:

Claro, como é uma mudança dinâmica, não podemos apreciar a mudança, mas se movermos o cursor para o elemento superior, a imagem mudará. Com isso terminamos este tutorial, com o qual nos aprofundamos no trabalho de formulários com Knockout.js, dando-nos ferramentas para melhorar a captura e validação dos dados que vêm de nossos usuários.