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.

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