Upgrade to Pro — share decks privately, control downloads, hide ads and more …

knockout.js: how I learned to love the markup

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.


Matthew Lyon

July 26, 2012


  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

  17. None
  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

  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

  46. None
  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