20120621 creating rich, responsive display and editor

#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

http://learn.knockoutjs.com/

Tutorial

Q&A

Thanks!tomvan@microsoft.com