Índice
A transferência da parte mais difícil da aplicação para o lado do cliente está se tornando cada vez mais comum, relegando as linguagens de servidor a apenas aquelas que tratam da persistência por meio de serviços DESCANSO.Parte da responsabilidade para que tudo isso aconteça recai sobre as novas formas de trabalhar com JavaScript e a geração de interfaces de usuário dinâmicas e responsivas, graças aos diferentes frameworks existir.
Este framework possui muitos pontos fortes como seu baixo peso e sua documentação, além de estar no mercado há muito tempo, por isso vem amadurecendo de forma consistente para poder ser aplicado em ambientes de produção.
1- Como a maioria das bibliotecas e estruturas de JavaScript os requisitos não são tão exigentes, neste caso precisaremos de um pequeno servidor web para melhor processar nossas solicitações, pode ser Wamp em janelas ou uma instância de Apache em Linux ou Mac.
2- Precisamos de um editor de rich text no estilo de Texto Sublime ou Bloco de notas ++ ser capaz de escrever o código necessário para cumprir os exemplos e exercícios que mostraremos.
3- Finalmente, precisamos de acesso à Internet para fazer o download Knockout.js pelo menos uma vez.
O processo de instalação é bastante simples e não depende de uma plataforma específica, o processo será o mesmo se estejamos em Windows, Linux ou MAC.
A primeira coisa que devemos fazer é baixar Knockout.js de sua página oficial, para isso podemos ir ao site do projeto e na seção de Transferências clicamos com o botão direito e selecionamos a opção Salvar link como:
PROLONGAR
É importante que salvemos o arquivo em uma pasta relevante para o nosso projeto para incluí-lo. Também pode ser instalado usando Bower ou mesmo usá-lo de qualquer um dos CDNs serviços para não ter que usar nosso servidor como um repositório de biblioteca.Assim que tivermos o arquivo, simplesmente temos que incluí-lo em um arquivo HTML da seguinte forma:
Instalando Knockout.jsComo podemos ver, só tivemos que incluir o arquivo baixado por meio de uma tag de script. Caso queiramos trabalhar com a versão do CDN Só precisamos mudar o caminho local para o caminho do arquivo na Internet, isso é muito semelhante a trabalhar com bibliotecas como jQuery ou estruturas como AngularJS.
Model View View ModelO título desta seção pode parecer um erro, Como é possível falar sobre Model View View Model? Não é igual? Resulta que Nocaute tem um padrão de design ou paradigma de desenvolvimento onde se inspira MVC, onde certamente o Modelo e a Visão eles se comportam como o que conhecemos da abordagem "clássica", no entanto, temos uma nova camada chamada ViewModel que se encarrega de unir e dar funcionalidade às nossas visões.
Ligação de dados é a principal característica do nosso framework que nos permite indicar ao documento HTML quais são os elementos aos quais você deve dar acesso Knockout.js, embora pareça algo complexo, podemos resumir em algo mais simples, é a simples aplicação de propriedades aos elementos da árvore SOL onde queremos que tenha desempenho Knockout.js.
Vamos ver o seguinte código de exemplo, digamos que queremos imprimir um nome de nosso ViewModel em uma etiqueta dentro do corpo, para isso, só temos que fazer o seguinte:
Instalando Knockout.jsVemos isso em nosso rótulo h1 há uma tag span e a tag span tem uma propriedade que não é nativa de HTML qual é a propriedade ligação de dados, é isso que nos faz conectar Knockout.js com nosso Árvore DOM neste caso, simplesmente indicamos que o nome da propriedade ou variável deve ser tirado de nosso ViewModel.
Se rodarmos nosso exemplo no navegador, obteremos um resultado como o que podemos ver na imagem a seguir:
Com isso já fizemos nosso primeiro aplicativo usando Knockout.js.
Agora devemos ter percebido que a filosofia ViewModel é uma parte importante do trabalho em Knockout.js, por isso vamos continuar nos aprofundando um pouco mais no assunto.
Criação do VistaModelExistem duas maneiras de criar uma Model View, a forma básica e a orientada a objetos, a qual usamos já depende da nossa forma de desenvolvimento, embora a recomendada seja Orientado a Objeto pois embora seja mais complexo no início, permite-nos conseguir uma melhor ordem na nossa aplicação.
Para criar um ViewModel básico, só temos que fazer algo como o seguinte:
var myModelView = {nome: 'Pedro Perez'};Como vemos, não é nada complexo, simplesmente definimos uma variável e colocamos um conteúdo de estilo nela. JSON.
Agora o caminho Orientado a Objeto nos permite criar métodos de acesso e manipulação das propriedades que queremos colocar em nosso ViewModel, para isso podemos fazer algo como o seguinte:
var myOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};Se quisermos, neste caso, podemos acessar diretamente o nome ou sobrenome individualmente, ou usar o método getName () que nos dá o nome e o sobrenome unidos ou concatenados.
Aqui, muitos podem se perguntar se não seria mais fácil fazer um solo Corda Com o nome e apelido, a resposta é muito simples, quanto mais opções tivermos, mais simples será a aplicação a nosso ver, imagine que só queríamos o nome, com a forma básica teríamos que processar a string para ser capaz de separá-los, na mudança orientada a objetos acessamos apenas a propriedade que nos interessa.
Até agora, o que vimos é muito estático, e se começarmos a usar parâmetros, desta forma um ViewModel Pode servir a muitos propósitos, já que não nos limitaremos ao que estabelecemos, mas podemos alterar os dados de acordo com a situação.
Vamos reescrever nossa forma Orientado a Objeto, e usaremos o seguinte formulário:
var myOOOOOOOFModelView = função (nome, sobrenome) {var self = this; self.name = name; self.lastname = sobrenome; self.getName = function () {return self.name + '' + self.last name; };};Como pudemos ver foi muito fácil implementar o uso de parâmetros, agora vamos implementar isso em nosso primeiro exemplo e assim ver como tudo se encaixa, para isso usaremos o seguinte código HTML:
Instalando Knockout.jsAqui, a primeira coisa que notamos é que o ligação de dados já não é texto como no exemplo inicial, se não usarmos html, isso nos permite enviar rótulos html e, assim, ser capaz de dar mais estilo à nossa resposta do ViewModel.
Já na seção onde definimos nosso ViewModel vemos que antes de aplicar o obrigatório do Knockout.js, fazemos uma instância do nosso ViewModel Orientado a Objeto, É neste ponto que podemos atribuir os valores aos nossos parâmetros ou propriedades, pois podemos ver que mantivemos a nossa separação de nome e apelido mas no final podemos utilizar o método que os concatena.
Quando executamos nosso exemplo, ele nos dá os seguintes resultados no navegador:
Haverá quem se pergunte o que esse framework tem que ainda não oferece AngularJS ou Backbone.js, e têm razão no questionamento, porém a resposta que lhes damos é que é apenas mais uma opção que podem ter à sua disposição, tem seus pontos fortes como a boa documentação e o baixo peso de sua implementação (apenas cerca de 20 kb), mas como tudo, todos são livres para escolher a ferramenta que lhes permite atingir seus objetivos e que melhor se adapta às necessidades do momento.
Com isso terminamos nosso tutorial, demos com sucesso nossos primeiros passos com Knockout.js, com isso podemos começar a pensar em todas as possibilidades que este framework de desenvolvimento de aplicativos nos oferece com a lógica do lado do cliente.