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

KnockoutJS TechEd NA 2012

KnockoutJS TechEd NA 2012

John Papa

July 01, 2012
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. None
  2. With and Without Knockout

  3. UI Patterns Data & Bindings Separation of Concerns Structured JavaScript

  4. 6+ 2+ Separates behavior and structure Declarative bindings Observables

  5. data-bind="value: firstName" Declarative Binding ko.observable ko.applyBindings Create an Observable Bind

    the ViewModel to the View http://jsfiddle.net/johnpapa/BEzJc/
  6. Source object Push from Source to Target

  7. None
  8. With and Without Knockout Observable

  9. Taylor 110 Taylor 914ce Taylor 914ce Taylor 110

  10. data-bind Declarative Binding product: { id: 1001, model: ko.observable("Taylor 314ce"),

    salePrice: ko.observable(1199.95) } ko.applyBindings(data); Source object Bind Source to Target, & Vice Versa
  11. None
  12. With and Without Knockout Observable Computed

  13. computed dependentObservable

  14. ko.computed this this.qty vm observables owner

  15. None
  16. With and Without Knockout Observable Computed ObservableArray

  17. None
  18. var myViewModel = { salesPerson: ko.observable("John"), empNum: ko.observable(39811), products: ko.observableArray([

    { model: "Taylor 314CE", price: 1749, id=321 }, { model: "Martin D40", price: 1899, id=479 } ]) }; <span data-bind="text: products().length"></span> Pre-populating Operating on observableArray
  19. None
  20. With and Without Knockout Observable Computed ObservableArray Built In Bindings

  21. enable value options value optionsText optionsValue Built into Knockout Binding

    for element attributes Multiple binding expressions
  22. attr checked click css disable enable event hasfocus html options

    optionsText optionsValue selectedOptions style submit text uniqueName value visible text value click disable enable attr Display and state bindings Text and value bindings Bindings for specific attributes visible event Event bindings
  23. None
  24. With and Without Knockout Observable Computed ObservableArray Built In Bindings

    Templates
  25. • If truthy condition if • If falsy condition ifnot

    • Execute for each item in a list foreach • Shortcut to execute for the object with
  26. template: {name: 'productsTmpl', foreach: lines} Pass the context for the

    template with “foreach” productsTmpl
  27. if: lines().length > 0 Any “truthy” expression

  28. with: model text: brand text: name <div> <div data-bind="text: model().brand"></div>

    <div data-bind="text: model().name"></div> </div>
  29. None
  30. All Part of the Native Template Engine in Knockout

  31. None
  32. With and Without Knockout Observable Computed ObservableArray Built In Bindings

    Templates Custom Binding Handlers
  33. None
  34. function(element, valueAccessor function(element, valueAccessor Runs first time the binding is

    evaluated Runs after init and every time one of its observables changes
  35. element, valueAccessor, allBindingsAccessor, viewModel valueAccessor element element, valueAccessor, allBindingsAccessor, viewModel

    valueAccessor element element Bound DOM element What is passed to the binding All other bindings on same element The viewmodel
  36. None
  37. With and Without Knockout Observable Computed ObservableArray Built In Bindings

    Templates
  38. JavaScript: The Developer Experience (DEV308) JavaScript: The Language (DEV307)

  39. http://www.microsoft.com/visualstudio/en-us http://blogs.msdn.com/b/jasonz/ http://www.facebook.com/visualstudio http://twitter.com/#!/visualstudio Somasegar’s Blog http://blogs.msdn.com/b/somasegar/

  40. http://northamerica.msteched.com www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn

  41. None
  42. None
  43. None
  44. None