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