Knockout js (Dennis Haney)


Published on

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
KO provides a complementary, high-level way to link a data model to a UI.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Knockout js (Dennis Haney)

  1. 1. Knockout JS Basics & Beyond
  2. 2. Why? Oh Why? • I HATE JavaScript • At least in the first ~10 years of existence • Then came jQuery in '06 • Which helped for the next ~5-7 years • Then came Knockout JS (and html5)
  3. 3. Demo: Why Plain JavaScript Sucks
  4. 4. Who am I • Dennis Haney • Master in Computer Science from the Copenhagen University of Computer Science DIKU (Denmark) • Been in Vietnam since 2006 • 15+ years programming professionally
  5. 5. What does KO fix? HTML is back in control of layout JavaScript is a helper, not the leader Declarative binding Templating When I update X... Then value displayed is also updated Dependency tracking Bi-directional data binding
  6. 6. Demo: What Does KnockoutJS Fix
  7. 7. Data-Binding data-bind attributes in HTML Declarative binding Templating observable for the properties Dependency tracking Bi-directional data binding ko.applyBindings() to activate bindings
  8. 8. Presentation Patterns
  9. 9. Simplified JS ViewModel HTML View
  10. 10. Demo: Two Way Binding
  11. 11. 3 kinds of observable v = ko.observable(“value”) To update do v(“new”), not v = “new” a = ko.observableArray([1,2,3]) Feels like native array An observableArray tracks which objects are in the array, not the state of those objects ko.computed(function() { return “value”; }) Automatic dependency tracking
  12. 12. Demo: Observables
  13. 13. Dependency tracking firstName lastName fullName
  14. 14. Demo: Observables Expanded
  15. 15. Bindings Controlling text and appearance The visible binding The text binding The html binding The css binding The style binding The attr binding Control flow The foreach binding The if binding The ifnot binding The with binding
  16. 16. Bindings Working with form fields The click binding The event binding The submit binding The enable binding The disable binding The value binding The hasFocus binding The checked binding The options binding The selectedOptions binding The uniqueName binding Rendering templates The template binding
  17. 17. Remember Load jQuery BEFORE KnockoutJS Otherwise events won't work properly Observables are FUNCTIONS, not plain values Remember both when reading and writing
  18. 18. Advanced Knockout
  19. 19. Virtual Elements Data-bind does not require an actual element to bind to in some cases (foreach, if etc.) Very useful if you DON'T want some parent element
  20. 20. Validation jQuery validation works well with Remember to use uniqueName binding jQuery Validation requires validation targets to have unique names
  21. 21. Custom bindings Can make new bindings that does whatever you want
  22. 22. Extenders Expand how a observable works Can use as log, trigger, enforcer or anything else you can come up with Only 1 built-in extender: throttle
  23. 23. Value converters Computed observables support “write” Can use as Value Converter, complex validation or as in the example a simple decomposition into multiple other fields
  24. 24. Questions? Dennis Haney
  25. 25. About us Author: Dennis Haney Find me at: Presentation made for JavaScript HCMC Meetup You can find us at: