20120621 creating rich, responsive display and editor

1,373 views

Published on

community day

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,373
On SlideShare
0
From Embeds
0
Number of Embeds
565
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20120621 creating rich, responsive display and editor

  1. 1. #comdaybe Creating rich, responsive display and editor user interfaces with Knockout.js
  2. 2. About me • @tomvangaever • Microsoft Premier Field Engineer • Microsoft Extended Experts Team • MCT, MCITP, MCPD, MCTS • BIWUG
  3. 3. Knockout.jsWhat?
  4. 4. Elevator pitch• Open source JavaScript library (MIT license)• Community Project• Clean underlying data model• MVVM design pattern• Steve Sanderson• Microsoft Program Manager - ASP.NET
  5. 5. Problem?• Rich client-side interactivity• Bindings• Wide browser support
  6. 6. Browser support• Mozilla Firefox 2.0+• Google Chrome• Microsoft Internet Explorer 6, 7, 8• Apple Safari• Opera 10 for Windows
  7. 7. 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
  8. 8. MODEL/VIEW/VIEWMODEL (MVVM)What?
  9. 9. KnockoutjsStep By step
  10. 10. Who is familiar with...• HTML• JavaScript
  11. 11. Check!• HTML• JavaScript• Very easy!
  12. 12. How to use it?HTML<script type="text/javascript" src="../js/knockout-latest.js“ /><input data-bind="value: userName" />
  13. 13. How to use it?HTML<script type="text/javascript" src="../js/knockout-latest.js“ /><input data-bind="value: userName" />JavaScriptvar ViewModel = function (userName) { this.userName = ko.observable(userName);}ko.applyBindings(new ViewModel("Tom Van Gaever"));
  14. 14. Yes we can!demo
  15. 15. More informationhttp://knockoutjs.com/documentation/links.html
  16. 16. Tutorialhttp://learn.knockoutjs.com/
  17. 17. Q&A
  18. 18. tomvan@microsoft.comThanks!

×