• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
20120621 creating rich, responsive display and editor
 

20120621 creating rich, responsive display and editor

on

  • 1,357 views

community day

community day

Statistics

Views

Total Views
1,357
Views on SlideShare
822
Embed Views
535

Actions

Likes
0
Downloads
6
Comments
0

3 Embeds 535

http://tomvangaever.be 528
http://www.tomvangaever.be. 6
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20120621 creating rich, responsive display and editor 20120621 creating rich, responsive display and editor Presentation Transcript

    • #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
    • Knockout.jsWhat?
    • 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
    • MODEL/VIEW/VIEWMODEL (MVVM)What?
    • KnockoutjsStep By step
    • 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"));
    • Yes we can!demo
    • More informationhttp://knockoutjs.com/documentation/links.html
    • Tutorialhttp://learn.knockoutjs.com/
    • Q&A
    • tomvan@microsoft.comThanks!