KnockoutJS é uma biblioteca JavaScript que simplifica a criação de interfaces web através do padrão MVVM, permitindo a vinculação declarativa entre elementos da interface e o modelo de dados, atualização automática da interface quando o modelo muda e rastreamento de dependências. O documento apresenta os principais conceitos e funcionalidades da biblioteca como bindings, templates e extensões.

1. KnockoutJS
MVVM na web para simplificar seu código de UI
Alberto Monteiro
alberto.monteiro@live.com
http://github.com/albertomonteiro

2. Alberto Monteiro
• Especialista C#/.NET
• Desenvolvedor há 5 anos
• Arquiteto de Software na Fortes Informática
• @aibertomonteiro
• alberto.monteiro@live.com
• http://blog.albertomonteiro.net.br/
• http://github.com/albertomonteiro

3. Conceitos chaves
Bindings declarativos
Fácil associação do
elementos do DOM com
seu modelo
UI refresh automático
Quando seu modelo muda,
sua UI atualiza
automaticamente
Rastreamento de
dependência
Atualização de UI de acordo
com a mudança do seu
objeto
Templates
Engine de templates
built-in.

4. Knockout
• Open source
• Puro javascript
• Pequeno
• Sem dependências
• Ótima documentação
• Suporte a vários browsers

5. Knockout

6. MVVM – Model View View Model

7. TodoMVC

8. TodoMVC

10. Bindings – Campos de formularios
 value
 click
 submit
 enable/disable
 checked
 options/selectedOptions
 event
 textInput/hasFocus

11. Bindings – Controle de fluxo
 foreach
 if
 ifnot
 with
 component/custom tags

12. Bindings – Controlando texto e aparência
 text
 attr
 css
 visible
 html
 style

13. Custom bindings

14. Extenders

15. Subscribe