Knockout mvvm-m1-slides

6,590 views

Published on

Playlists : https://www.youtube.com/watch?v=xD7PGM7qGzQ&index=2&list=PLLQgkMVoGtcvoZHbsPDrDPM19PYJ0GSBG

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

  • Be the first to like this

No Downloads
Views
Total views
6,590
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout mvvm-m1-slides

  1. 1. Building HTML5 and JavaScript Apps with MVVM and Knockout John Papa @john_papa http://johnpapa.net
  2. 2. Getting Started with Knockout John Papa @john_papa http://johnpapa.net
  3. 3. Outline      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  4. 4. JavaScript Development Separation of Concerns Structured JavaScript UI Patterns Data & Bindings
  5. 5. What is Knockout ? Separates behavior and structure Declarative bindings Observables 6+ 2+
  6. 6. Key Knockout Concepts
  7. 7. Knockout in 3 Steps Declarative Binding <input data-bind="value: firstName" /> var myViewModel = { firstName: ko.observable("John") }; Create an Observable ko.applyBindings(myViewModel); Bind the ViewModel to the View http://jsfiddle.net/johnpapa/BEzJc/
  8. 8. DEMO Hello Knockout
  9. 9. Outline      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  10. 10. Separation, Organization, Data Binding  MVVM     Foremost, a separation pattern Model – View – ViewModel Not technology specific Works well with data binding  But what about everything else?  Just helpers Separation of Concerns
  11. 11. MVVM Components ViewModel View (HTML) Model (JSON)
  12. 12. MVVM Components Model View ViewModel • The Data • JavaScript object
  13. 13. MVVM Components View • The web page, the HTML • User friendly presentation of information ViewModel Model
  14. 14. MVVM Components ViewModel • Behavior and Data for the View • Contains Properties, Methods & the Model View viewmodel = { id: ko.observable("123"), salePrice: ko.observable(1995), rating: ko.observable(4), isInStock: ko.observable(true), guitarModel: { code: ko.observable("314ce"), name: ko.observable("Taylor 314 ce") }, showDetails: function () { /* method goes here */ } }; http://jsfiddle.net/johnpapa/u9S93/ http://jsfiddle.net/johnpapa/zBqxy/ Model
  15. 15. DEMO Knockout with MVVM
  16. 16. Outline      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  17. 17. jsFiddle: Chalkboard for Ideas  Created by Piotr Zalewa and hosted at http://jsFiddle.net  Free code sharing tool  Within a browser you can:     Edit Share Execute Debug  Ideal for quick chalkboard ideas
  18. 18. HTML JavaScript jsFiddle http://jsfiddle.net/johnpapa/nBWKZ/ CSS Results
  19. 19. DEMO jsFiddle
  20. 20. Outline      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  21. 21. Valuable Visual Studio Extensions  NuGet  manage 3rd party libraries and references  Web Essentials  Code collapsing, add vendor specific CSS properties, much more  Web Standards Update  HTML intellisense and validation Free  WoVS Default Browser Switcher  Quickly change the default browser from Visual Studio  JSLint  JavaScript code analysis  CSSCop  Catches common CSS issues  Resharper 6  JavaScript refactoring tools Free Trial Only
  22. 22. DEMO Visual Studio Extensions
  23. 23. Begin Coding with Knockout  Referencing Knockout   Get source from GitHub Use NuGet  Intellisense in *.js files /// <reference path= "/scripts/knockout-2.0.0.debug.js" />
  24. 24. DEMO Getting Started in Visual Studio
  25. 25. Outline      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  26. 26. Knockout Resources  Knockout  http://knockoutjs.com  Source code  https://github.com/SteveSanderson/knockout  Documentation  http://jpapa.me/kodocs  Forums  http://jpapa.me/koforum  Tutorials  http://learn.knockoutjs.com/  Stackoverflow  http://jpapa.me/kostackoverflow  Ryan Niemeyer’s blog  http://www.knockmeout.net  jsFiddle  http://www.jsfiddle.net
  27. 27. DEMO Knockout Resources
  28. 28. Summary      JavaScript, Data Binding and Knockout MVVM with Knockout jsFiddle Using Knockout in Visual Studio Key Resources
  29. 29. For more in-depth online developer training visit on-demand content from authors you trust

×