Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Knockout Data Binding
Slide 3
Slide 3 text
6+ 2+
Separates behavior and structure
Declarative bindings
Observables
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Declarative
Binding
var myViewModel = {
code: ko.observable('DEV338')
};
ko.applyBindings(myViewModel);
Create an
Observable
Bind the ViewModel
to the View
Slide 6
Slide 6 text
var title = ko.observable();
Title
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Slide 9
Slide 9 text
Title
Track
Slide 10
Slide 10 text
name('Kat');
Use
Parentheses
to Unwrap
Slide 11
Slide 11 text
var 'Haley'
Read Values
Using
Parentheses
'Ella'
'Ella'
Set Values
Using
Parentheses
Function definition
Good!
Redefined name to be
a string, not an
observable
Good!
Slide 12
Slide 12 text
Unwrapping observable function in code
Dive into objects with declarative binding
sessions().length
speaker().imagePath
Slide 13
Slide 13 text
Slide 14
Slide 14 text
When You
Need a Value
That Doesn’t
Exist in the
Web Service
Slide 15
Slide 15 text
vm = {
id: ko.observable(1),
salePrice: ko.observable(4199),
qty: ko.observable(2)
};
vm.extendedPrice = ko.computed(function () {
return this.product() ?
this.salePrice() * parseInt("0" + this.qty(), 10) : 0;
}, vm);
observables
Slide 16
Slide 16 text
var hasChanges = ko.computed(function() {
return datacontext.hasChanges();
});
var canSave = ko.computed(function() {
return hasChanges() && !isSaving();
});
Slide 17
Slide 17 text
Tracks which
objects are in
the array
Slide 18
Slide 18 text
var vm = {
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 }
])
};
Pre-populating
Operating on
observableArray
Slide 19
Slide 19 text
Declarative Bindings in HTML
Slide 20
Slide 20 text
Built into
Knockout
Binding for
Element
Attributes
Multiple
Binding
Expressions
Slide 21
Slide 21 text
attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visible
Slide 22
Slide 22 text
attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visible
Slide 23
Slide 23 text
attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visible
Slide 24
Slide 24 text
attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visible
Slide 25
Slide 25 text
Total value:
Any truthy expressionSlide 26
Slide 26 text
Slide 27
Slide 27 text
Custom Bindings
Slide 28
Slide 28 text
Just Another
Binding
Slide 29
Slide 29 text
ko.bindingHandlers.fadeVisible = {
init: function (element, valueAccessor) {
},
update: function (element, valueAccessor, allBindingsAccessor) {
}
};
Runs first time the
binding is evaluated
Runs after init and every time
one of its observables changes
Slide 30
Slide 30 text
ko.bindingHandlers.fadeVisible = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var shouldDisplay = valueAccessor();
$(element).toggle(shouldDisplay);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var shouldDisplay = valueAccessor(),
allBindings = allBindingsAccessor();
shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
}
};
Bound DOM
element
1 Value passed
to the binding
2 All bindings
on same element
3 The
viewmodel
4
Slide 31
Slide 31 text
Use
Breakpoints
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
See more at
http://www.fotolia.com/johnpapa