24 May, 2012 0 Comments AUTHOR: elemarjr CATEGORIES: Sem categoria Tags: ,

Você conhece KnockoutJS?!

Tempo de leitura: 1 minute

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.

image

Além disso, pode colaborar com o projeto no Github.

Como aprender KnockoutJS?

O site oficial possui um excelente tutorial on-line.

image

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("")); }); [/sourcecode]

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.

0 Comments

  1. 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.

    Reply
  2. Fiz uma breve alteraçãozinha, nem digitar mais o cara consegue, o fiddle está aqui:
    http://jsfiddle.net/AlbertoMonteiro/Y2nDM/embedded/

    Reply
  3. Antonio G. Castro Jr 4 years ago says:

    Conheço e gosto muito.

    Reply
  4. bgoliveira 4 years ago says:

    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

    Reply
  5. Eduardo Chiletto 4 years ago says:

    Estou usando no meu trabalho. Muito boa.

    Reply
  6. Mestre o meu twitter ficou errado, é @aibertomonteiro

    Reply
  7. Rodrigo Braga (@rodrigobra) 4 years ago says:

    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

    Reply
    • elemarjr 4 years ago says:

      Não conheço nenhuma forma "automática" para fazer isso.

      Entretanto, acho que você pode, facilmente, desenvolver um T4 para isso.

      Reply
      • Rodrigo Braga (@rodrigobra) 4 years ago says:

        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?!

        Reply
      • Matheus Costa Vieira 3 years ago says:

        Aqui na empresa que trabalho trabalhamos com o knockout da seguinte forma:

        Temos uma ViewModelBase que cria as propriedades oriundas de models do .NET com o "mapping.fromJS", quando necessito devolver ao servidor o método existe um método que retorna as propriedades criadas por ela.

        As classes que a implementam criam novos observables, funções etc.

        Nisso consigo manter a consistência do que veio e do qua vai voltar do servidor.

        A closure me ajuda a manter as coisas nos lugares.

        E trabalhamos com sistemas complexos tanto no front-end quando no back-end.

        function ViewModelBase(p) {
        "use strict";
        var mSelf = this,
        applied = false,
        o = checkValue(p, {}),
        obj = null;

        // observables
        mSelf.Visible = ko.observable(true);

        // creating the properties from the parameters
        obj = ko.mapping.fromJS(o);

        for (var i in obj) {
        if (i.indexOf("$") !== 0)
        mSelf[i] = obj[i];
        }

        mSelf.clone = function () {
        var ret = {};
        for (var i in obj) {
        ret[i] = ko.utils.unwrapObservable(mSelf[i]);
        }
        return ret;
        }
        }

        se todas as classes forem herdadas dessa funciona maravilhosamente bem obrigado.

        Porque utilizar o método clone?
        Pois dessa forma deixo livre a classe filho implementar a sua própria lógica de salvar.

        Reply
    • O mundo involui 4 years ago says:

      Não adote KnockoutJS como bala de prata, para sistemas clássicos faça do modo tradicional, já para webapps KnockoutJS é muito válido.

      Reply
  8. O mundo involui 4 years ago says:

    Databind de volta, já vi esse filme...

    Reply
  9. Matheus Costa Vieira 3 years ago says:

    Não recomendaria para crud's básicos

    Reply
  10. O mundo involui 2 years ago says:

    Já jogaram seus projetos no lixo agora que passou a moda do knockoutjs? Qual a próxima moda que os arquitetos vão querer brincar agora???

    Reply
    • elemarjr 2 years ago says:

      KnockoutJs não é mais usado?

      Reply

Trackbacks for this post

  1. KnockoutJS – Mantendo propriedades tipadas com extenders « Alberto Monteiro, C# developer