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

1. Building HTML5 and JavaScript Apps with
MVVM and Knockout
John Papa
@john_papa
http://johnpapa.net

2. Getting Started with Knockout
John Papa
@john_papa
http://johnpapa.net

3. Outline





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

4. JavaScript Development
Separation
of Concerns
Structured
JavaScript
UI Patterns
Data &
Bindings

5. What is Knockout ?
Separates behavior and structure
Declarative bindings
Observables
6+
2+

6. Key Knockout Concepts

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. DEMO
Hello Knockout

9. Outline





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

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. MVVM Components
ViewModel
View (HTML)
Model
(JSON)

12. MVVM Components
Model
View
ViewModel
• The Data
• JavaScript object

13. MVVM Components
View
• The web page, the HTML
• User friendly presentation of information
ViewModel
Model

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. DEMO
Knockout with MVVM

16. Outline





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

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. HTML
JavaScript
jsFiddle
http://jsfiddle.net/johnpapa/nBWKZ/
CSS
Results

19. DEMO
jsFiddle

20. Outline





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

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. DEMO
Visual Studio Extensions

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. DEMO
Getting Started in Visual Studio

25. Outline





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

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. DEMO
Knockout Resources

28. Summary





JavaScript, Data Binding and Knockout
MVVM with Knockout
jsFiddle
Using Knockout in Visual Studio
Key Resources

29. For more in-depth online developer training visit
on-demand content from authors you trust