Knockout.js é uma biblioteca JavaScript que facilita a criação de aplicações single-page com data-binding e MVVM. Permite sincronizar modelos de dados com views dinâmicas através de observables e templates.

2. Criado por Steve Sanderson (Microsoft)
. Objectivo
Desenvolver uma biblioteca que permitisse criar
aplicações que respondam rapidamente e com um
modelo de dados bem estruturado

3. Caracteristicas
. Sincronização de dados
. MVVM Development pattern
. Suporta outras bibliotecas
. Suportado por todos os browsers

4. Conceitos base
. MVVM (Model, View, View Model)
. Data Binding (ligação de dados)
. Observables
. Computed Observables
. Templating

5. Fluxo MVVM
View
Model
View
utilizador Model

6. Model
Camada de negócio, dados em formato json
View Model
Adapta informação proveniente do model de forma a
ser implementada facilmente na view
View (HTML puro)
<span data-bind="text: nome"></span>

7. Data Binding
<span data-bind="text: nome"></span>
O atributo data-bind permite à view e ao
ViewModel manterem-se sincronizados.

8. Observables
this.nome = ko.observable(variável)
Observa alterações nas propriedades,
permitindo actualização das mesmas em
tempo real sempre que houver alterações

9. Computed Observables
São funções que dependem de um ou mais observables
e que se actualizam automaticamente sempre que as
suas dependências tiverem alterações
this.nomeCompleto = ko.computed(function() {
return this.nome + ' ' + this.apelido
}, this);
o segundo argumento da função (this) permite passar a palavra
reservada this sem alterar seu escopo dentro da função

10. Templating
. Native templating
- Utilizando Control Flow Bindings
. String-based templating
- Permite integração com frameworks de templating
(ex: underscore.js, jquery.tmpl, mustache.js,
handlebars.js)

11. Control Flow Bindings
Capturam o HTML contido no elemento e utilizam-no
para renderizar informação.
. foreach
. if
. ifnot
. with

12. Control Flow Bindings
Exemplo
<ul data-bind="foreach: user">
<li data-bind="text: username">
</ul>
O elemento <ul> será populado com elementos <li> de
acordo com o número de utilizadores existentes.

13. String Based Templating
Exemplo com integração de control flow binding
<ul data-bind="template: {name: 'user-list-tmpl',
foreach: users}">
</ul>
<script type="text/html" id="user-list-tmpl">
<li data-bind="text: nome"></li>
</script>

14. Lifesavers
. knockoutjs.com
. knockmeout.net
. stackoverflow.com/questions/
tagged/knockout.js
.https://groups.google.com/forum/?
fromgroups#!forum/knockoutjs

15. Útil
http://channel9.msdn.
com/Events/MIX/MIX11/FRM08

16. Thanks
Mário Andrade
frontendweekly.net
@MarioRAndrade
Front-end developer @ Codistage.pt