Knockout.js is a JavaScript library that helps create rich, responsive user interfaces with a clean underlying data model. It allows for declarative data binding between view models and HTML, automatic UI refresh when view models change, and templating capabilities. Key features include declarative binding, automatic UI refresh, templating, and dependency tracking. The library uses observables to track changes to view model properties and update the UI accordingly.

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