Knockout JS
Basics
& Beyond
Why? Oh Why?
• I HATE JavaScript
• At least in the first ~10 years of existence

• Then came jQuery in '06
• Which helped ...
Demo:
Why Plain JavaScript Sucks
http://jsfiddle.net/Cine/9Kk3R/
Who am I
• Dennis Haney
• Master in Computer Science from the
Copenhagen University of Computer Science
DIKU (Denmark)
• B...
What does KO fix?
HTML is back in control of layout
JavaScript is a helper, not the leader
Declarative binding
Templating
...
Demo:
What Does KnockoutJS Fix
http://jsfiddle.net/Cine/n2W6w/1/
Data-Binding
data-bind attributes in HTML
Declarative binding
Templating

observable for the properties
Dependency trackin...
Presentation Patterns
Simplified

JS
ViewModel

HTML
View
Demo:
Two Way Binding
http://jsfiddle.net/Cine/YVUwZ/
3 kinds of observable
v = ko.observable(“value”)
To update do v(“new”), not v = “new”

a = ko.observableArray([1,2,3])
Fee...
Demo:
Observables
http://jsfiddle.net/Cine/Fys9C/
Dependency tracking
firstName

lastName

fullName
Demo:
Observables Expanded
http://jsfiddle.net/Cine/45GLk/
Bindings
Controlling text and appearance
The visible binding
The text binding
The html binding
The css binding
The style b...
Bindings
Working with form fields
The click binding
The event binding
The submit binding
The enable binding
The disable bi...
Remember
Load jQuery BEFORE KnockoutJS
Otherwise events won't work properly

Observables are FUNCTIONS, not plain values
R...
Advanced Knockout
Virtual Elements
Data-bind does not require an actual element to bind
to in some cases (foreach, if etc.)
http://jsfiddle....
Validation
jQuery validation works well with
http://jsfiddle.net/Cine/NxvNh/
Remember to use uniqueName binding
jQuery Val...
Custom bindings
Can make new bindings that does whatever you want
http://jsfiddle.net/Cine/4JZsA/
Extenders
Expand how a observable works
http://jsfiddle.net/Cine/7nJRQ/2/
Can use as log, trigger, enforcer or anything el...
Value converters
Computed observables support “write”
http://jsfiddle.net/Cine/2r2x4/
Can use as Value Converter, complex ...
Questions?
Dennis Haney davh@davh.dk

http://knockoutjs.com/documentation/introduction.html
About us
Author: Dennis Haney
Find me at: davh@davh.dk
Presentation made for JavaScript HCMC Meetup
You can find us at:
ht...
Upcoming SlideShare
Loading in...5
×

Knockout js (Dennis Haney)

384

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
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 http://jsfiddle.net/Cine/9Kk3R/
  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 http://jsfiddle.net/Cine/n2W6w/1/
  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 http://jsfiddle.net/Cine/YVUwZ/
  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 http://jsfiddle.net/Cine/Fys9C/
  13. 13. Dependency tracking firstName lastName fullName
  14. 14. Demo: Observables Expanded http://jsfiddle.net/Cine/45GLk/
  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.) http://jsfiddle.net/Cine/8QMJC/ Very useful if you DON'T want some parent element
  20. 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. 21. Custom bindings Can make new bindings that does whatever you want http://jsfiddle.net/Cine/4JZsA/
  22. 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. 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. 24. Questions? Dennis Haney davh@davh.dk http://knockoutjs.com/documentation/introduction.html
  25. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×