Você conhece KnockoutJS?!
Olá pessoal. Tudo certo?!
O que você acharia de poder desenvolver suas páginas Web de forma mais declarativa?! É exatamente isso que o KnockoutJS permite.
O que é KnockoutJS?
Seguindo a descrição do site oficial:
KnockoutJS é uma biblioteca que simplifica a construção de interfaces gráficas dinâmicas, com Javascript, através da utilização de MVVM.
A propósito, se você não conhece MVVM, recomendo que veja esse post.
Ainda segundo o site, KnockoutJS segue esse conceitos-chave:
- Declarative Bindings – Easily associate DOM elements with model data using a concise, readable syntax;
- Automatic UI Refresh – When your data model’s state changes, your UI updates automatically;
- Dependency Tracking – Implicitly set up chains of relationships between model data, to transform and combine it;
- Templating – Quickly generate sophisticated, nested UIs as a function of your model data.
Como obter?
Você pode obter KnockoutJS diretamente do site (o js tem apenas 40K), ou através do Nuget.
Além disso, pode colaborar com o projeto no Github.
Como aprender KnockoutJS?
O site oficial possui um excelente tutorial on-line.
Além disso, há uma excelente página de exemplos. Comece por lá.
Um pequeno exemplo
Tempos atrás, mostrei como escrever um Remaining Character Count (semelhante ao Twitter) usando jQuery. Abaixo, segue o mesmo exemplo com Knockout.
<!doctype html>
<html>
<head>
</head>
<body>
<div>
<h2>What's happening?</h2>
<textarea
cols='50'
rows='5'
data-bind='value: message, valueUpdate:"afterkeydown"'
/>
<div data-bind='text: remaining'></div>
<button data-bind='enable: couldSend'>Send</button>
</div>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="knockout-2.1.0.js" type="text/javascript"></script>
<script type='text/javascript'>
...
</script>
</body>
</html>
Abaixo, o Javascript.
$(function () {
var ViewModel = function (message) {
this.message = ko.observable(message);
this.remaining = ko.computed(function () {
return 140 - this.message().length;
}, this);
this.couldSend = ko.computed(function () {
return this.message().length > 0 && this.message().length < 140;
}, this);
this.show = function () {
alert(this.message());
};
};
ko.applyBindings(new ViewModel(""));
});
Bacana, não?!
UPDATE: O @albertomonteiro fez a gentileza de criar um jsFiddle para este exemplo. Quer ver na prática, então clique aqui.
Era isso.
La na empresa apresentei o ko e passamos a usa, é lindo quando reduzimos 140 linhas de jQuery para 40 com ko, um código 1000x mais fácil de ser lido do que o anterior.
RIA é fantástico e o ko facilita bastante isso, ótimo post!
Também vou falar de ko no meu blog, explicar algumas coisas que usamos la e que deixam bem fácil o nosso trabalho.
Fiz uma breve alteraçãozinha, nem digitar mais o cara consegue, o fiddle está aqui:
http://jsfiddle.net/AlbertoMonteiro/Y2nDM/embedded/
Conheço e gosto muito.
Outro excelente post Elemar, parabéns.
Estou usando o BackboneJs como alternativa ao KnockoutJS e estou gostando bastante, principalmente da parte de sync com os serviços RESTs que é muito elegante e não ha necessidade de usar uma outra biblioteca como o openshot por exemplo para fazer isso. Você conhece essa biblioteca?
Estou escrevendo um artigo sobre o Backbone e quando eu terminar te passo, gostaria muito de saber sua opnião.
Abraços
Estou usando no meu trabalho. Muito boa.
Mestre o meu twitter ficou errado, é @aibertomonteiro
Pingback: KnockoutJS – Mantendo propriedades tipadas com extenders « Alberto Monteiro, C# developer
Elemar
Estou avançando com os meus testes com o KO e estou com uma dúvida; como usá-lo em conjunto com os Models (do .NET MVC) sem ter que ficar reescrevendo os modelos no Javascript?!
Eu já possuo alguns modelos recheados com DataAnnotations e me facilitam bastante na validação (no servidor e no cliente) e gostaria de reaproveitá-los e fazer os bind’s no cliente baseados nesses modelos.
Isso é possível, existe alguma alternativa nesse sentido?!
Valeu
Não conheço nenhuma forma “automática” para fazer isso.
Entretanto, acho que você pode, facilmente, desenvolver um T4 para isso.
Elemar
Escrevi um pequeno plugin, que apesar de um problema ou outro, resolve o meu problema (especificamente).
http://jsfiddle.net/rbraga/6eAsZ/
Você acha que essa solução é interessante? o caminho é por aí mesmo?!
Não adote KnockoutJS como bala de prata, para sistemas clássicos faça do modo tradicional, já para webapps KnockoutJS é muito válido.
Até o Twitter se equivocou e voltaram atrás para o servidor: http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
Databind de volta, já vi esse filme…