Transcript With and Without Knockout Separation of Concerns Structured JavaScript UI Patterns Data & Bindings Separates behavior and structure Declarative bindings Observables 6+ 2+

With and Without Knockout
Separation
of Concerns
Structured
JavaScript
UI Patterns
Data &
Bindings
Separates behavior and structure
Declarative bindings
Observables
6+
2+
Declarative
Binding
data-bind="value: firstName"
Create an
Observable
ko.observable
ko.applyBindings
http://jsfiddle.net/johnpapa/BEzJc/
Bind the ViewModel
to the View
Source object
Push from Source to Target
With and Without Knockout
Observable
Taylor 110
Taylor 914ce
Declarative
Binding
data-bind
product: {
Source object
id: 1001,
model: ko.observable("Taylor 314ce"),
salePrice: ko.observable(1199.95)
}
ko.applyBindings(data);
Bind Source to Target, & Vice Versa
With and Without Knockout
Observable
Computed
computed
dependentObservable
observables
ko.computed
this
vm
this.qty
owner
With and Without Knockout
Observable
Computed
ObservableArray
var myViewModel = {
salesPerson: ko.observable("John"),
Pre-populating
empNum: ko.observable(39811),
products: ko.observableArray([
{ model: "Taylor 314CE", price: 1749, id=321 },
{ model: "Martin D40", price: 1899, id=479 }
])
};
Operating on
observableArray
<span data-bind="text: products().length"></span>
With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Built into Knockout
Binding for element
attributes
enable
options
value
optionsText
optionsValue
Multiple binding
expressions
value
Event
Display
andbindings
state bindings
Bindings
forvalue
specific
attributes
Text and
bindings
attr
attr
checked
click
click
css
disable
disable
enable
enable
event
event
hasfocus
html
options
optionsText
optionsValue
selectedOptions
style
submit
text
text
uniqueName
value
value
visible
visible
With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates
if
ifnot
foreach
with
• If truthy condition
• If falsy condition
• Execute for each item in a list
• Shortcut to execute for the object
template: {name: 'productsTmpl', foreach: lines}
Pass the context for the template with “foreach”
productsTmpl
Any “truthy” expression
if: lines().length > 0
<div>
<div data-bind="text: model().brand"></div>
<div data-bind="text: model().name"></div>
</div>
with: model
text: brand
text: name
All Part of the
Native Template Engine
in Knockout
With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates
Custom Binding Handlers
function(element, valueAccessor
Runs first time the binding is
evaluated
function(element, valueAccessor
Runs after init and every
time one of its observables
changes
Bound DOM
element
What is passed
to the binding
All other bindings
on same element
The
viewmodel
element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element
element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element
element
With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates
JavaScript: The Developer Experience (DEV308)
JavaScript: The Language (DEV307)
http://www.microsoft.com/visualstudio/en-us
Somasegar’s Blog
http://blogs.msdn.com/b/somasegar/
http://blogs.msdn.com/b/jasonz/
http://www.facebook.com/visualstudio
http://twitter.com/#!/visualstudio
http://northamerica.msteched.com
www.microsoft.com/learning
http://microsoft.com/technet
http://microsoft.com/msdn