Elemar DEV

Negócios, tecnologia e desenvolvimento

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.

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(""));
});

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.

15 comentários em “Você conhece KnockoutJS?!

  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.

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

  3. Conheço e gosto muito.

  4. bgoliveira
    25/05/2012

    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

  5. Eduardo Chiletto
    25/05/2012

    Estou usando no meu trabalho. Muito boa.

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

  7. Pingback: KnockoutJS – Mantendo propriedades tipadas com extenders « Alberto Monteiro, C# developer

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

    • elemarjr
      18/09/2012

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

      • Matheus Costa Vieira
        14/03/2014

        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.

    • O mundo involui
      24/03/2013

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

  9. O mundo involui
    24/03/2013

    Databind de volta, já vi esse filme…

  10. Matheus Costa Vieira
    14/03/2014

    Não recomendaria para crud’s básicos

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informação

Publicado às 24/05/2012 por em Post e marcado , .

Estatísticas

  • 703,282 hits
%d blogueiros gostam disto: