This document provides an overview of key concepts in Knockout including observables, computed values, observable arrays, built-in bindings, templates, and custom binding handlers. It demonstrates how Knockout separates behavior and structure through declarative bindings to observables, and how built-in and custom bindings work. Resources for further learning about JavaScript and Knockout are listed at the end.

2. With and Without Knockout

3. UI Patterns
Data &
Bindings
Separation
of Concerns
Structured
JavaScript

4. 6+ 2+
Separates behavior and structure
Declarative bindings
Observables

5. data-bind="value: firstName"
Declarative
Binding
ko.observable
ko.applyBindings
Create an
Observable
http://jsfiddle.net/johnpapa/BEzJc/

6. Source object
Push from Source to Target

8. With and Without Knockout
Observable

9. Taylor 110
Taylor 914ceTaylor 914ce
Taylor 110

10. data-bind
Declarative
Binding
product: {
id: 1001,
model: ko.observable("Taylor 314ce"),
salePrice: ko.observable(1199.95)
}
ko.applyBindings(data);
Source object
Bind Source to Target, & Vice Versa

12. With and Without Knockout
Observable
Computed

13. computed dependentObservable

14. observables

16. With and Without Knockout
Observable
Computed
ObservableArray

18. var myViewModel = {
salesPerson: ko.observable("John"),
empNum: ko.observable(39811),
products: ko.observableArray([
{ model: "Taylor 314CE", price: 1749, id=321 },
{ model: "Martin D40", price: 1899, id=479 }
])
};
<span data-bind="text: products().length"></span>
Pre-populating
Operating on
observableArray

20. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings

21. enable value
options
value
optionsText
optionsValue
Built into Knockout
Binding for element
attributes
Multiple binding
expressions

22. attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visibletext value
click disable
enable
attr
Display and state bindings
Text and value bindingsBindings for specific attributes
visible
event
Event bindings

24. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates

25. • If truthy conditionif
• If falsy conditionifnot
• Execute for each item in a listforeach
• Shortcut to execute for the objectwith

26. template: {name: 'productsTmpl', foreach: lines}
Pass the context for the template with “foreach”
productsTmpl

27. if: lines().length > 0
Any “truthy” expression

28. with: model
text: brand
text: name
<div>
<div data-bind="text: model().brand"></div>
<div data-bind="text: model().name"></div>
</div>

30. All Part of the
Native Template Engine
in Knockout

32. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates
Custom Binding Handlers

34. function(element, valueAccessor
function(element, valueAccessor
Runs first time the binding is
evaluated
Runs after init and every
time one of its observables
changes

35. element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element
element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element element
Bound DOM
element
What is passed
to the binding
All other bindings
on same element
The
viewmodel

37. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates

38. JavaScript: The Developer Experience (DEV308)
JavaScript: The Language (DEV307)

39. http://www.microsoft.com/visualstudio/en-us
http://blogs.msdn.com/b/jasonz/
http://www.facebook.com/visualstudio
http://twitter.com/#!/visualstudio
Somasegar’s Blog http://blogs.msdn.com/b/somasegar/

40. http://northamerica.msteched.com www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn