Para a maioria dos aplicativos da web, o fato de poder coletar a entrada do usuário por meio de formulários é sua principal função, mas isso pode ser deixado de lado se o aplicativo como tal não puder enviar ou receber os dados para o servidor.
É por isso que existem linguagens do lado do servidor ou o processamento de um JSON para nos ajudar nesta tarefa, onde para os fins deste tutorial usaremos jQuery como um framework JavaScript para realizar o processamento de um JSON, que servirá para substituir a linguagem do lado do servidor e nos fornecerá a entrada de dados a serem processados em nosso modelo.
Requisitos
Precisaremos ter Knockout.js em nosso sistema e acessível para os aplicativos que vamos criar, também precisamos jQuery que podemos usar localmente ou em seu CDN. Permissões para gravar 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 NotePad ++. Para executar os aplicativos, precisamos de um tipo de servidor web Apache ou Nginx em nosso ambiente de teste.
Começaremos a trabalhar no aplicativo diretamente e não nos aprofundaremos em alguns dos conceitos usados nos exemplos, portanto, recomendamos fazer um passeio pelos tutoriais que envolvem mudanças dinâmicas, manipulação de formulários e, claro, ligações com Knockout.js.
Lendo dados externos
Vamos criar um documento HTML simples que incluirá a biblioteca de Knockout.js assim como jQuery. Vamos criar nosso formulário sem esquecer de fazer o ligações dos elementos nele e, finalmente, na lógica de nosso ViewModel Vamos criar a função para lidar com as mudanças em nosso formulário com os observáveis, vamos ver o código para nosso HTML:
Dados ExternosComo vemos, temos um documento HTML Simples com alguns elementos, compostos por dois campos de texto e uma lista de seleção, e se formos observadores, podemos ver que nossos observáveis estão igualmente vazios, para terminar vamos ver como fica nossa forma inicial:Nome completo:
Sobrenome:
Atividades favoritas:Dados de upload
Uma vez que temos nossa forma, devemos dar sentido ao nosso exemplo e é para poder carregar dados externos em nossa aplicação, por isso nossos observáveis estão vazios. Vamos usar o método jQuery chamado $ .getJSON () que recebe um JSON Como entrada, caso trabalhemos com uma linguagem do lado do servidor, devemos especificar o caminho do arquivo que irá gerá-lo como saída da seguinte forma:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }Para não complicar as coisas, vamos usar um JSON já gerado dentro de nossa aplicação, para isso criamos um com a seguinte estrutura que pode variar seus valores se assim o desejarem:
{"primeiro nome": "Nome", "sobrenome": "Sobrenome", "atividades": ["Bicicleta", "Videogames", "Desenvolvimento da Web"], "hobbies": "Ler"}Agora podemos mudar nossa função anterior e enviar como parâmetro o nome do nosso arquivo JSON, vejamos:
self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }Ao incluir esta função em nosso código, podemos verificar como nosso método funciona $ .getJSON () e assim obter um dos valores dentro dele, a resposta de nosso aplicativo ao pressionar o botão Carregue os dados, ele estará simplesmente mostrando o nome.
Como podemos ver que nosso método funciona perfeitamente, agora só precisamos depois de obter os valores do nosso JSON é incluir a função dentro do nosso ViewModel e fazer a correspondência com os identificadores de nosso formulário, vamos ver como fica nosso código final:
função UserViewModel () {var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); self.hobbies (data.hobbies);}); }} ko.applyBindings (new UserViewModel ());Agora só temos que executar nosso exemplo no navegador e pressionar o botão Dados de upload que deve preencher os campos do nosso formulário imediatamente com os valores do JSON, vamos ver:
Como podemos ver, funcionou perfeitamente e pudemos ler dados externos em algumas linhas simples de código. Isso é bastante útil em termos de usabilidade e funcionalidade de nosso aplicativo, mas podemos fazer um pouco mais, podemos armazenar os dados em um JSON e assim estender a funcionalidade de nosso aplicativo.
Armazenando os dados
Para aplicativos convencionais da web, armazenar os dados no formato JSON é tão simples quanto converter objetos para esse formato e enviá-los ao servidor, mas no caso de aplicativos que usam Knockout.js o problema é um pouco mais complicado, pois o ViewModel use observáveis em vez de propriedades JavaScript normais, uma vez que os observáveis são funções e tentar serializá-los e enviá-los ao servidor pode levar a resultados inesperados.
ko.toJSON ()Para esses casos estamos com sorte, pois Knockout.js fornece uma solução simples e eficaz, a função ko.toJSON (), que substitui todas as propriedades dos objetos observáveis por seu valor atual e retorna o resultado como uma string no formato JSON.
Para implementar esta nova funcionalidade em nosso aplicativo, vamos criar um novo botão em nosso formulário chamado Guardar dados e nossa função será amarrada guardar dadosVamos ver como fica nosso código com as modificações:
Dados ExternosSe rodarmos nosso exemplo no navegador vemos como temos um novo botão, carregamos nossos valores, que se quisermos podemos modificá-los. Por fim, pressionamos o botão correspondente que deve nos mostrar os valores em nosso formulário como uma string no formato JSON, vamos ver como fica:Nome completo:
Sobrenome:
Atividades favoritas:Dados de upload
Guardar dados
PROLONGAR
Finalmente, se quisermos que esses dados sejam enviados para um script em nosso servidor, só precisamos fazer algumas alterações em nossa função recém-criada e ao usar o método $ .post completamos o processo, para terminar vamos ver como fica:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("A informação foi enviada ao servidor");}); }
Mapeamento de dados para visualizar modelos
A maneira como lidamos com nossas informações de um JSON é tudo de que precisamos para criar aplicativos robustos e implementar qualquer tipo de solução independente de linguagem do lado do servidor, desde que sejam tratados com JSON.
Mas podemos ir um pouco mais longe e mapear automaticamente os dados JSON do servidor para nosso ViewModel e podemos conseguir isso com um plug-in para Knockout.js chamado mapeamento nocaute. Para começar a usá-lo, devemos primeiro baixá-lo de seu repositório no GitHub, descompactá-lo em nosso projeto e incluí-lo após nosso framework para evitar erros por falta de dependências.
Agora só temos que modificar nosso código e remover nosso botão Carregar dados, bem como toda a lógica de Knockout.js, já que graças ao nosso plug-in será muito mais fácil obter as informações, vamos ver nosso código final:
Dados ExternosComo podemos ver, nossa lógica foi reduzida a apenas três linhas de código, o que faz quando nosso aplicativo carrega, imediatamente faz uma solicitação Ajax do JSON que deve corresponder aos elementos de nossa forma. Isso leva os objetos nativos de JavaScript e transforma cada propriedade em um observável, evitando todas aquelas linhas de código e tornando não apenas nossa aplicação mais robusta, mas nosso código mais legível.Nome completo:
Sobrenome:
Atividades favoritas:
Para terminar, se executarmos nosso aplicativo, vemos como automaticamente nossos valores são carregados em nosso formulário e podemos ver a solicitação Ajax junto com a resposta JSON se usarmos o console do navegador:
Foi assim que terminamos este tutorial, onde pudemos ver como Knockout.js nos oferece uma maneira de enviar e armazenar dados, independentemente da linguagem do lado do servidor que está sendo usada, isso nos dá maior liberdade em nossa implementação, mudando apenas a linguagem do servidor para PHP, Ruby ou Python por mencionar alguns.
