Top Banner
KnockoutJS MVVM na web para simplificar seu código de UI Alberto Monteiro [email protected] http://github.com/albertomonteiro
15

CEJS 2014 - KnockoutJS

Aug 03, 2015

Download

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CEJS 2014 - KnockoutJS

KnockoutJSMVVM na web para simplificar seu código de UI

Alberto [email protected]://github.com/albertomonteiro

Page 2: CEJS 2014 - KnockoutJS

Alberto Monteiro• Especialista C#/.NET• Desenvolvedor há 5 anos• Arquiteto de Software na Fortes

Informática• @aibertomonteiro• [email protected]• http://blog.albertomonteiro.net.br/• http://github.com/albertomonteiro

Page 3: CEJS 2014 - KnockoutJS

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

TemplatesEngine de templates

built-in.

Page 4: CEJS 2014 - KnockoutJS

Knockout

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

Page 5: CEJS 2014 - KnockoutJS

Knockout

Page 6: CEJS 2014 - KnockoutJS

MVVM – Model View View Model

Page 7: CEJS 2014 - KnockoutJS

TodoMVC

Page 8: CEJS 2014 - KnockoutJS

TodoMVC

Page 9: CEJS 2014 - KnockoutJS

Demo

Page 10: CEJS 2014 - KnockoutJS

Bindings – Campos de formularios

value

click

submit

enable/disable

checked

options/selectedOptions

event

textInput/hasFocus

Page 11: CEJS 2014 - KnockoutJS

Bindings – Controle de fluxo

foreach

if

ifnot

with

component/custom tags

Page 12: CEJS 2014 - KnockoutJS

Bindings – Controlando texto e aparência

text

attr

css

visible

html

style

Page 13: CEJS 2014 - KnockoutJS

Custom bindings

Page 14: CEJS 2014 - KnockoutJS

Extenders

Page 15: CEJS 2014 - KnockoutJS

Subscribe