an introduction to knockout.js
DESCRIPTION
An introduction to the features of knockout.jsTRANSCRIPT
![Page 1: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/1.jpg)
An introduction to Knockout.js
Emanuele Delbono@emadb
![Page 2: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/2.jpg)
Everyone loves jumping in muddy puddles
![Page 3: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/3.jpg)
Everyone loves jumping in muddy puddleswriting javascript code
![Page 4: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/4.jpg)
We write tons of javascript code
![Page 5: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/5.jpg)
I am
Web Developer in CodicePlastico. I have fun writing web apps in C#, Javascript and Ruby.
![Page 6: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/6.jpg)
Agenda
• The MVVM Pattern
• Welcome to Knockout
• Binding basics
• The features
• Conclusions
![Page 7: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/7.jpg)
Presentation patterns
![Page 8: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/8.jpg)
The MVVM pattern
Model ViewModel View
![Page 9: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/9.jpg)
![Page 10: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/10.jpg)
![Page 11: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/11.jpg)
![Page 12: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/12.jpg)
ViewModel has methods too!
![Page 13: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/13.jpg)
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
![Page 14: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/14.jpg)
Key features
• Declarative binding
• Automatic UI refresh
• Templating
• Dependency tracking
![Page 15: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/15.jpg)
Bidirectional Data Binding
ViewModel View
![Page 16: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/16.jpg)
Binding
• data-bind attributes in HTML
• ko.observable() for the properties
• ko.applyBindings() to activate bindings
![Page 17: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/17.jpg)
Binding
var viewModel = { message: ko.observable('Welcome')}
<div data-bind="text: message"></div>
![Page 18: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/18.jpg)
Observable is a function!
Don’t do this:
viewModel.message = 'hi'
Do this:
viewModel.message('hi')
![Page 19: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/19.jpg)
Code time
![Page 20: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/20.jpg)
Recap
• Simple binding
• Array binding
• Computed properties
• Event binding
• Conditionals
• Templates
• Subscriptions
• Messagging
• Contexts
• Custom bindings
• Virtual elements
![Page 21: An introduction to knockout.js](https://reader034.vdocument.in/reader034/viewer/2022052222/554f932eb4c905d25b8b5300/html5/thumbnails/21.jpg)
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