community day

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!