knockout.js: how I learned to love the markup

A brief guide to the knockout.js "MVVM" framework and why I like it over similar offerings for client-side javascript apps. Slides aren't as complete as I'd like them to be, finished them right beforehand.

Transcript

1. KNOCKOUT.js - or - how I learned to stop hating - and - love the markup
2. @appfog console.appfog.com built with knockout @mattly matthew lyon
3. console.appfog.com
4. console.appfog.com
5. MVVM model view viewmodel a microsoft joint
6. MVP model view Presenter a martin fowler joint
7. “ viewmodel presenter MVVM is identical to Fowler’s presentation model; both feature an abstraction that contains a view’s state & behavior Josh Smith Microsoft MVP
8. { name: “mattly”, cats: 6, hood: “king” } model
9. <div id=“me” data-bind=“ text: cathood, click: move”> view
10. vm.hood = ko.observable( model.hood ); present
11. vm.cathood = ko.computed( Function (){ return cats() + “ in ” + hood(); present
12. function move(){ cats(0); hood( “buckman”); mediate
13. ko .applybindings( vm, $(‘#me’)[0] ); bind
14. it’s about the bindings
15. $(this) .find(‘.cats’) .text(int(cats)) bindings are not jquery wankery
16. ele.innerhtml = mustache( tmpl, vars); bindings are not template rendering
18. bindings are declarative <span data-bind=“ text: name”>
19. attr: property event: handler
20. pub/sub it’s for your markup
21. hood cats cathood <span>
22. attributes forms events flow
23. visible text html attributes css {} style {} attr {}
24. <div data-bind=“ attr: { href: infolink }”> attributes
25. value enable disable checked options selectedOptions forms
26. <input data-bind=“ value: hood, valueupdate: ‘keyup’”> forms
27. click submit hasfocus event {} events
28. <div data-bind=“ event: { mouseover: askmover }”> events
29. foreach with if ifnot flow
30. <ul data-bind=“ foreach:hoods”> <li data-bind=“ text: name”> flow
31. <ul data-bind=“ foreach:hoods”> <li data-bind=“ text: name”> wat
32. ko.subscribable ko.computed ko.observable ko.observablearray
33. ko.observablearray indexof slice push pop sort unshift shift reverse splice remove
34. <ul data-bind=“ foreach:hoods”> <li data-bind=“ if: $index == 0”> ko.observablearray
35. not enough? go ahead and extend
36. jquery ui bootstrap components ko.binding handlers
37. bindinghandlers <div data-bind=“ slider: mem”> jquery ui: slider
38. setters macros behavior ko.extenders
39. extenders ko.observable( dn).extend( validate(fqdn)
40. extenders <div data-bind=“ visible: dn.err “>
41. tests are easy without the dom
42. it(“has cathood”, function(){ expect( cathood()) .tomatch( /buckman/)
43. mockups with fake data are easy
44. > vm.cats(4) > cathood() “4 in king”
45. dependencies can sometimes be hard
47. integration with jquery plugins and the like is hard
48. uniform.js some bootstrap legacy jquery couldn’t use
49. want some more?
50. interactive tutorials