Building HTML and JavaScript Apps with KnockoutJS and MVVM

879 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
879
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building HTML and JavaScript Apps with KnockoutJS and MVVM

  1. 1. With and Without Knockout
  2. 2. UI Patterns Data & Bindings Separation of Concerns Structured JavaScript
  3. 3. 6+ 2+ Separates behavior and structure Declarative bindings Observables
  4. 4. data-bind="value: firstName" Declarative Binding ko.observable ko.applyBindings Create an Observable http://jsfiddle.net/johnpapa/BEzJc/
  5. 5. Source object Push from Source to Target
  6. 6. With and Without Knockout Observable
  7. 7. Taylor 110 Taylor 914ceTaylor 914ce Taylor 110
  8. 8. 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
  9. 9. With and Without Knockout Observable Computed
  10. 10. computed dependentObservable
  11. 11. observables
  12. 12. With and Without Knockout Observable Computed ObservableArray
  13. 13. 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
  14. 14. With and Without Knockout Observable Computed ObservableArray Built In Bindings
  15. 15. enable value options value optionsText optionsValue Built into Knockout Binding for element attributes Multiple binding expressions
  16. 16. 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
  17. 17. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates
  18. 18. • If truthy conditionif • If falsy conditionifnot • Execute for each item in a listforeach • Shortcut to execute for the objectwith
  19. 19. template: {name: 'productsTmpl', foreach: lines} Pass the context for the template with “foreach” productsTmpl
  20. 20. if: lines().length > 0 Any “truthy” expression
  21. 21. with: model text: brand text: name <div> <div data-bind="text: model().brand"></div> <div data-bind="text: model().name"></div> </div>
  22. 22. All Part of the Native Template Engine in Knockout
  23. 23. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates Custom Binding Handlers
  24. 24. function(element, valueAccessor function(element, valueAccessor Runs first time the binding is evaluated Runs after init and every time one of its observables changes
  25. 25. 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
  26. 26. With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates
  27. 27. JavaScript: The Developer Experience (DEV308) JavaScript: The Language (DEV307)
  28. 28. 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/
  29. 29. http://northamerica.msteched.com www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn

×