An introduction to the features of knockout.js

1. An introduction
to Knockout.js
Emanuele Delbono
@emadb

2. Everyone loves jumping in muddy puddles

3. Everyone loves jumping in muddy puddles
writing javascript code

4. We write tons of
javascript code

5. I am
Web Developer in
CodicePlastico. I have fun
writing web apps in C#,
Javascript and Ruby.

6. Agenda
• The MVVM Pattern
• Welcome to Knockout
• Binding basics
• The features
• Conclusions

7. Presentation
patterns

8. The MVVM pattern
Model ViewModel View

12. ViewModel has
methods too!

13. What is Knockoutjs?
“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 [...], KO can help you implement it
more simply and maintainably.”
http://knockoutjs.com

14. Key features
• Declarative binding
• Automatic UI refresh
• Templating
• Dependency tracking

15. Bidirectional Data
Binding
ViewModel View

16. Binding
• data-bind attributes in HTML
• ko.observable() for the properties
• ko.applyBindings() to activate bindings

17. Binding
var viewModel = {
message: ko.observable('Welcome')
}
<div data-bind="text: message"></div>

18. Observable is a function!
Don’t do this:
viewModel.message = 'hi'
Do this:
viewModel.message('hi')

19. Code time

20. Recap
• Simple binding
• Array binding
• Computed
properties
• Event binding
• Conditionals
• Templates
• Subscriptions
• Messagging
• Contexts
• Custom bindings
• Virtual elements

21. Conclusions
• KO is small focused on binding
• Very low learning curve
• Focused on databinding (no routing,
model synchronization, etc...)
• Lots documentation
• Could be hard on big pages

22. https://github.com/emadb/jsday13