Level 250-300 session on KnockoutJS, with 10 examples. Full code at my blog: http://blogit.create.pt/blogs/joaopedromartins Note: in portuguese.

1. DataBindingcom
Microsoft WebCamp 2014
20 de Maio de 2014

2. 2Sobremim
/43
João Pedro “jota” Martins
CTO
jota@create.pt
@lokijota
http://blogit.create.pt/blogs/joaomartins
http://www.linkedin.com/in/joaopedromartins

3. 3Agenda
 O que é KnockoutJS?
 Observables
 Computed Members
 ObservableArrays
 Bindings nativos
 Templatese controlode fluxo
 Extensãode Binding Handlers
 Temas relâmpago:
 MappingPlugin,Extenders,KoUtils,Debug/troubleshooting
/43

4. 4OqueéKnockoutJS?
 BibliotecaJavascriptque ajuda na criaçãode interfacesdinâmicos
sobreum modelo de dados limpo, usando MVVM.
 Poroutraspalavras:éuma frameworkJavascriptde data binding para
aplicaçõesWeb.
ELEVATORPITCH /43

5. 5Apresentaçãorápida
 Grátise opensource,criadoem2010por SteveSanderson
 Javascriptpuro– funcionacomoutrasframeworks, serverou client-side
 Compacto-47kb‘minificado’(~13kbusandogzip)
 Semdependências(jQueryopcional,p.ex.)
 Suporta[praticamente]todososbrowsers
 IE6+(!!),Firefox2+,Chrome,Opera,Safari(desktop/mobile)
 Completamentedocumentadoe comcomunidadeactiva
 DocumentaçãodaAPI,exemplosfuncionais,tutoriaisinteractivos,blogs,Google
Group
 Versãoactual:3.1.0egrandefocoem retro-compatibilidade
OQUEÉKNOCKOUTJS? /43
6+ 2+

6. 6Funcionalidades
 Bindings declarativos
 Associaçãode elementosdo DOMaum modeloemJavascriptcomuma
sintaxeconciseelegível
 Actualizaçãoautomática do InterfaceUtilizadore Modelo
 Sempreque omodelomuda,o IUéactualizado(evice-versa)
 Gestão de dependências
 Identificaçãoimplícitadedependênciasentrecamposdo modelo
 Templating
 Geraçãodeinterfacescombasenos dadosdo modelo
OQUEÉKNOCKOUTJS? /43

7. MVVM
/43
7
OQUEÉKNOCKOUTJS?
MODEL
Server/DB Javascript+Observables HTML + Bindings
VIEWVIEW MODEL AUTO
UserInterfaceem
HTML
Backenddelógica
edados,podeser
qualquer
tecnologia
ModeloOOdo
UserInterface,
comdadose
lógicadaUI
Dadose
acções

8. JavascriptBrothersinArms
jQuery
Substitutocross-browserpara
umaAPIinconsistentedoDOM
Mecanismobaixonívelde
manipularelementoseevent
handlersempáginasWeb
/43
8
AngularJS
Frameworkcompletaalto-nível
paradesenvolvimentodeSingle
PageApplications(SPA)
ComparávelaDurandal
KnockoutJS
Frameworkalto-nívelpara
mapeamentoentremodelosde
dadoseinterfacesWeb,usando
padrãoMVVM
KOJSusajQueryseestiver
disponível
OQUENÃOÉKNOCKOUTJS?

9. KnockoutJSem3passos
<input data-bind="value:firstName"/>
OQUEÉKNOCKOUTJS?
Binding
declarativo
ko.observable
ko.applyBindings
Criar
observable
Ligar (bind) do
ViewModel à View
/43
9

10. KOJS101
DEMO01

11. Sagan
Carl SaganCarl Sagan
Sagan
Observables
 Encapsularpropriedadescoma função“observable”
 ko.observable() ou ko.observable(valor_inicial);
 Binding bi-direccional
 TantoUIcomomodelosãoactualizados
CONCEITOSBASE /43
11

12. Bindingbi-direccional
CONCEITOSBASE
data-bind
Binding
declarativo
product: {
id: 1001,
model: ko.observable(“Surface 2 Pro"),
salePrice: ko.observable(1199.95)
}
ko.applyBindings(product);
Objecto de dados
Ligar UI a dados e vice-versa (wireup)
/43
12

13. Observables
DEMO02

14. Membroscalculados-Computed
 Definiruma função que defineum valor,e usarisso no binding
 Ex:Nomecompleto,PhotoUrl,Montantestotais
 Quando os observablessão alterados,os camposcomputedtambém
são notificados– detecçãoimplícita de dependências
 Gestão de “this”…
 Pode sernecessáriopassarinformaçãosobreo“this”paraocomputed
CONCEITOSBASE /43
14

15. DefinirumapropriedadeComputed
vm= {
id:ko.observable(1),
unitPrice:ko.observable(4199),
:ko.observable(2)
};
vm.extendedPrice= ko.computed(function(){
returnthis.product()?
this.unitPrice()* parseInt("0"+ this.qty(),10):0;
},vm);
CONCEITOSBASE
observables
Owner (=this)
/43
15

16. ComputedObservables
DEMO03

17. ObservableArray
 Permite‘seguir’os itens de um array,não o seu estadointerno
 Notificaçõesgeradasquando itens são Adicionadosou Removidosdo
Array
 Suporta API normais sobrearrays(push, pop, length,…)
 Não são geradasnotificaçõesquando as propriedadesde itensdo
arraysão alterados
 Necessáriousarko.observable()nessaspropriedadestambém
CONCEITOSBASE /43
17

18. ExemplodeObservableArray
CONCEITOSBASE
var myViewModel = {
salesPerson: ko.observable(“Luis Calado"),
empNum: ko.observable(666),
products: ko.observableArray([
{ model: “Surface Pro", price: 1749, id=123 },
{ model: “Windows Azure", price: 189, id=456 }
])
};
<span data-bind="text: products().length"></span>
Pré-popular com
dados
Agir sobre o
observable array
/43
18

19. ObservableArray
DEMO04

20. Bindings
<input type="text"
data-bind="enable:allowEditing, value:salePrice"/>
<selectdata-bind="options:colors,
value:selectedColor,
optionsText:'name',
optionsValue:'key'" ></select>
CONCEITOSBASE
Nativos de
Knockout
Binding a atributos
de elementos
Vários bindings
num elemento
/43
20

21. Bindingsnativos(2)
CONCEITOSBASE
attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visibletext value
click disable
enable
attr
Display and state bindings
Text and value bindingsBindings for specific attributes
visible
event
Event bindings
/43
21

22. Bindingsnativos
DEMO05

23. Templates:controldefluxo
CONCEITOSBÁSICOS
• Se condição “truthy”if
• Se condição “falsy”ifnot
• Executar para cada item numa listaforeach
• Especificar sub-scope do viewModelwith
/43
23

24. 24Templates–inlinetemplates
<tbody data-bind="foreach:lines">
<tr>
<td style="width: 100px;">
<input data-bind="value:quantity" />
</td>
...
</tr>
</tbody>
CONCEITOSBÁSICOS /43

25. Templates–namedtemplates
<tbodydata-bind="template:{name:'productsTmpl',foreach:lines}">
</tbody>
<scripttype="text/html"id="productsTmpl">
<tr>
<tdstyle="width:100px;">
<inputdata-bind="value:quantity"/>
</td>
...
</tr>
</script>
CONCEITOSBÁSICOS
Passar o contexto para a template com o “foreach”
/43
25

26. Condições
<p data-bind="if:lines().length> 0">
<span>Total value:</span>
<span data-bind="text:grandTotal()"></span>
</p>
CONCEITOSBÁSICOS
Qualquer expressão
“truthy”
/43
26

27. Especificarocontexto
<divdata-bind="with:model">
<divdata-bind="text: brand"></div>
<divdata-bind="text: name"></div>
</div>
<div>
<div data-bind="text: model().brand"></div>
<div data-bind="text: model().name"></div>
</div>
CONCEITOSBÁSICOS

28. Controlodefluxoetemplates(foreach)
DEMO06

29. ControlodefluxosemcontainerHTML
 UtilizaçãodecomentáriosHTML
 Comentáriousaelementosdecontroldefluxo
 if
 ifnot
 foreach
 with
 Template
<!--koforeach:myItems-->
…
<!--/ko-->
CONCEITOSBÁSICOS /43
29
Parte do motor
de templating nativo
do KnockoutJS

30. Controlodefluxosemcontainer
DEMO07

31. OquesãoCustomBindingHandlers?
 Mecanismodeextensibilidadedebindings
 Exemplos
 Arredondareapresentarcomovalormonetário
 Animarumatransição
 fadeVisible
 IntegrarcomjQueryUI
 jqButton
 Ratingscomestrelas
 starRating
 Fazerlogging
CONCEITOSBASE /43
31

32. ComocriarumBindingHandler
ko.bindingHandlers.fadeVisible={
:function(element,valueAccessor){
//...
},
:function(element,valueAccessor){
//...
}
}
CONCEITOSBASE
Executado na primeira
avaliação do binding
Executado depois do init,
cada vez que um dos
observables mude
/43
32

33. BindingHandler-parâmetros
ko.bindingHandlers.fadeVisible= {
init:function(element,valueAccessor,allBindingsAccessor,viewModel){
varshouldDisplay= valueAccessor();
$(element).toggle(shouldDisplay);
},
update:function(element,valueAccessor,allBindingsAccessor,viewModel){
varshouldDisplay= valueAccessor();
shouldDisplay?$(element).fadeIn():$(element).fadeOut();
}
}
Elemento do
DOM
Parâmetro
binding
Outros bindings
do elemento
viewmodel

34. CustomBindingHandlers
DEMO08

35. Mapping
 Mapping Plugin
 ExtensãoaoKnockout(downloadoficialseparado)
 Converteum objectoJSparaum objectoobservável,recursivamente
 Possibilidadedeparametrizaroperação
 ko.mapping.fromJS(jsdata)eko.mapping.toJS(viewModel);
 Podeterproblemasde desempenho.Alternativa:
 KnockoutWrap
OUTROSTEMAS /43
35

36. 36Extenders
 Permitemadicionar funcionalidadeextraaos nossosobservablesque
filtram a forma comonotificaçõessão geradas
 Ex. de nativos:
 myViewModel.personName.extend({rateLimit:50 });// limitataxadeeventos
 myViewModel.personName.extend({notify:'always'});// forçasync
 Ex. de desenvolvidosà medida:
 this.firstName=ko.observable(“jota").extend({logChange:"firstname"});
OUTROSTEMAS /43

37. 37KOUtils
 Despistardadosusadosparafazerbindcomumelemento:
 ko.dataFor(element)–dadoscomqueoelementfoi‘binded’
 ko.contextFor(element)–todoo‘bindingcontext’disponívelparaoelementDOM
 ko.toJS–criacópiadeumviewModelremovendotodaaestruturadoKO
 ko.toJSON–chamatoJSedepoisconverteoresultadoparaJSON
 JSON.stringify(viewModel)ignorafunções,eobservablessãofunções…
 ko.utils.parseJSON(str)–semelhanteaJSON.parse.Aseguirimplicausarmappingplugin
 ko.utils.arrayMap(str,delegate)–iteranumarrayeaplicaumdelegate(semelhantealambda),
devolvendocolecção
varmappedData=ko.utils.arrayMap(jsonData,function(item){
returnnewItem(item.name,item.category,item.price);
});
 ko.utils.arrayForEach(val,delegate)–iteranumarrayeaplicaumdelegate
 ko.utils.arrayFilter(val,boolDelegate)–filtraarray
OUTROSTEMAS /43

38. 38DebugeTroubleshooting
<predata-bind=“text:ko.toJSON($data,0, 2)”></pre>
<inputdata-bind=“uniqueIName:console.log($data),value:description/>
 KnockoutContextDebugger(chromeextension)edev-consoledobrowser
 Performance–quantasvezesdisparaumbinding?Apenasdeveser
observableo quedeverterfluxobi-direccional
OUTROSTEMAS /43

39. Justonemoredemo
DEMO09

40. 40Resumindo–KnockoutJSéumabiblioteca…
Específica e pequena
Compatível com vários browsers e outras
frameworks
Permite sincronização automática da alterações e
suporta melhor estruturação de código Javascript
/43

41. 41Horasdediversão
DocumentaçãoeDownload
 Homepageedocumentação:http://knockoutjs.com
 BlogSteveSanderson:http://blog.stevensanderson.com
 BlogRyanNiemeyer:http://knockmeout.net
 Código:https://github.com/knockout/knockout/releases
Extraseextensões
 KnockoutValidation:https://github.com/Knockout-Contrib/Knockout-Validation
 KnockoutWrap:https://github.com/arj03/knockout.wrap
 Knockout-es5:https://github.com/SteveSanderson/knockout-es5
 KnockoutDelegatedEvents:https://github.com/rniemeyer/knockout-delegatedEvents
 GoogleChromeExtension:Knockoutjscontextdebugger
Comunidade
 https://groups.google.com/forum/#!forum/knockoutjs
 http://stackoverflow.com “knockoutjs”
/43

42. Obrigado!
jota@create.pt
@lokijota
http://blogit.create.pt/blogs/joaomartins
http://www.linkedin.com/in/joaopedromartins