Knockout.js is an open source JavaScript library that supports building rich, responsive user interfaces. It uses a Model-View-ViewModel (MVVM) design pattern to cleanly separate application logic and UI. Knockout.js provides data binding between view models and HTML, allowing for two-way binding that updates automatically on changes. The library has wide browser support and over 300 behavioral specifications tested to ensure cross-browser compatibility.

1. #comdaybe
Creating rich, responsive
display and editor user
interfaces
with Knockout.js

2. About me
• @tomvangaever
• Microsoft Premier Field Engineer
• Microsoft Extended Experts Team
• MCT, MCITP, MCPD, MCTS
• BIWUG

5. Knockout.js
What?

6. Elevator pitch
• Open source JavaScript library (MIT
license)
• Community Project
• Clean underlying data model
• MVVM design pattern
• Steve Sanderson
• Microsoft Program Manager - ASP.NET

7. Problem?
• Rich client-side interactivity
• Bindings
• Wide browser support

8. Browser support
• Mozilla Firefox 2.0+
• Google Chrome
• Microsoft Internet Explorer 6, 7, 8
• Apple Safari
• Opera 10 for Windows

9. Browser support - Validation
• Simply download the source code
• Open /spec/runner.html on the
browser.
• >300 behavioral specifications tested
• A report of any problems
• Demo

10. MODEL/VIEW/VIEWMODEL (MVVM)
What?

12. Knockoutjs
Step By step

13. Who is familiar with...
• HTML
• JavaScript

14. Check!
• HTML
• JavaScript
• Very easy!

15. How to use it?
HTML
<script type="text/javascript" src="../js/knockout-latest.js“ />
<input data-bind="value: userName" />

16. How to use it?
HTML
<script type="text/javascript" src="../js/knockout-latest.js“ />
<input data-bind="value: userName" />
JavaScript
var ViewModel = function (userName) {
this.userName = ko.observable(userName);
}
ko.applyBindings(new ViewModel("Tom Van Gaever"));

17. Yes we can!
demo

19. More information
http://knockoutjs.com/documentation/links.h
tml

20. Tutorial
http://learn.knockoutjs.com/

21. Q&A

22. tomvan@microsoft.com
Thanks!