![Page 1: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/1.jpg)
#comdaybe
Creating rich, responsive display and editor user interfaces
with Knockout.js
![Page 2: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/2.jpg)
About me
• @tomvangaever• Microsoft Premier Field Engineer• Microsoft Extended Experts Team • MCT, MCITP, MCPD, MCTS• BIWUG
![Page 3: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/3.jpg)
![Page 4: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/4.jpg)
![Page 5: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/5.jpg)
What?Knockout.js
![Page 6: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/6.jpg)
Elevator pitch
• Open source JavaScript library (MIT license)
• Community Project• Clean underlying data model• MVVM design pattern
• Steve Sanderson• Microsoft Program Manager - ASP.NET
![Page 7: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/7.jpg)
Problem?
• Rich client-side interactivity• Bindings• Wide browser support
![Page 8: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/8.jpg)
Browser support
• Mozilla Firefox 2.0+ • Google Chrome • Microsoft Internet Explorer 6, 7, 8• Apple Safari• Opera 10 for Windows
![Page 9: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/9.jpg)
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
![Page 10: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/10.jpg)
What?MODEL/VIEW/VIEWMODEL (MVVM)
![Page 11: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/11.jpg)
![Page 12: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/12.jpg)
Step By stepKnockoutjs
![Page 13: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/13.jpg)
Who is familiar with...
• HTML• JavaScript
![Page 14: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/14.jpg)
Check!
• HTML• JavaScript
• Very easy!
![Page 15: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/15.jpg)
How to use it?
HTML<script type="text/javascript" src="../js/knockout-latest.js“ /><input data-bind="value: userName" />
![Page 16: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/16.jpg)
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"));
![Page 17: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/17.jpg)
demoYes we can!
![Page 18: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/18.jpg)
![Page 19: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/19.jpg)
http://knockoutjs.com/documentation/links.html
More information
![Page 21: 20120621 creating rich, responsive display and editor](https://reader035.vdocument.in/reader035/viewer/2022081602/554f9266b4c905435d8b514d/html5/thumbnails/21.jpg)
Q&A