• Like
Knockout js (Dennis Haney)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Knockout js (Dennis Haney)


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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Knockout JS Basics & Beyond
  • 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. Demo: Why Plain JavaScript Sucks http://jsfiddle.net/Cine/9Kk3R/
  • 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. 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. Demo: What Does KnockoutJS Fix http://jsfiddle.net/Cine/n2W6w/1/
  • 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. Presentation Patterns
  • 9. Simplified JS ViewModel HTML View
  • 10. Demo: Two Way Binding http://jsfiddle.net/Cine/YVUwZ/
  • 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. Demo: Observables http://jsfiddle.net/Cine/Fys9C/
  • 13. Dependency tracking firstName lastName fullName
  • 14. Demo: Observables Expanded http://jsfiddle.net/Cine/45GLk/
  • 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. 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. Remember Load jQuery BEFORE KnockoutJS Otherwise events won't work properly Observables are FUNCTIONS, not plain values Remember both when reading and writing
  • 18. Advanced Knockout
  • 19. Virtual Elements Data-bind does not require an actual element to bind to in some cases (foreach, if etc.) http://jsfiddle.net/Cine/8QMJC/ Very useful if you DON'T want some parent element
  • 20. Validation jQuery validation works well with http://jsfiddle.net/Cine/NxvNh/ Remember to use uniqueName binding jQuery Validation requires validation targets to have unique names
  • 21. Custom bindings Can make new bindings that does whatever you want http://jsfiddle.net/Cine/4JZsA/
  • 22. Extenders Expand how a observable works http://jsfiddle.net/Cine/7nJRQ/2/ Can use as log, trigger, enforcer or anything else you can come up with Only 1 built-in extender: throttle
  • 23. Value converters Computed observables support “write” http://jsfiddle.net/Cine/2r2x4/ Can use as Value Converter, complex validation or as in the example a simple decomposition into multiple other fields
  • 24. Questions? Dennis Haney davh@davh.dk http://knockoutjs.com/documentation/introduction.html
  • 25. About us Author: Dennis Haney Find me at: davh@davh.dk Presentation made for JavaScript HCMC Meetup You can find us at: http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC?ref=hl https://plus.google.com/communities/116105314977285194967