Transcript Knockout Data Binding Separates behavior and structure Declarative bindings Observables 6+ 2+ Declarative Binding var myViewModel = { firstName: ko.observable('John') }; ko.applyBindings(myViewModel); Create an Observable Bind the ViewModel to the View.

Knockout Data Binding
Separates behavior and structure
Declarative bindings
Observables
6+
2+
Declarative
Binding
<input data-bind="value: code" placeholder="Code"/>
var myViewModel = {
firstName: ko.observable('John')
};
ko.applyBindings(myViewModel);
Create an
Observable
Bind the ViewModel
to the View
var title = ko.observable();
<div data-bind="with: session">
<label for="title">Title</label>
<input id="title" data-bind="value: title"/>
</div>
<section data-bind="
<article>
<div>
<img data-bind="
<address data-bind="
<address data-bind="
</div>
</article>
</section>
">
" />
"></address>
"></address>
<div>
<label for="title">Title</label>
<input id="title" data-bind="value: session().title"/>
</div>
<div>
<label>Track</label>
<select data-bind="options: tracks,
optionsText: 'name', value: session().track">
</select>
</div>
name('Kat');
Use
Parentheses
to Unwrap
var
'Haley'
Read Values
Using
Parentheses
Set Values
Using
Parentheses
Function definition
Good!
Good!
'Ella'
'Ella'
Redefined name to be
a string, not an
observable
Unwrapping observable function in code
Dive into objects with declarative binding
sessions().length
speaker().imagePath
<section>
<div data-bind="text: people().length"></div>
<article data-bind="foreach: people">
<address data-bind="text:name"></address>
<address data-bind="text:age"></address>
<address data-bind="text:address().city"></address>
</article>
</section>
When You
Need a Value
That Doesn’t
Exist in the
Web Service
vm = {
id: ko.observable(1),
salePrice: ko.observable(4199),
qty: ko.observable(2)
};
observables
vm.extendedPrice = ko.computed(function () {
return this.product() ?
this.salePrice() * parseInt("0" + this.qty(), 10) : 0;
}, vm);
var hasChanges = ko.computed(function() {
return datacontext.hasChanges();
});
var canSave = ko.computed(function() {
return hasChanges() && !isSaving();
});
Tracks which
objects are in
the array
var vm = {
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>
Declarative Bindings in HTML
Built into
Knockout
Binding for
Element
Attributes
Multiple
Binding
Expressions
<input type="text"
data-bind="enable: allowEdit, value: price" />
<select data-bind="options: colors,
value: selectedColor,
optionsText: 'name',
optionsValue: 'key'" ></select>
attr
checked
click
css
disable
enable
event
hasfocus
html
options
optionsText
optionsValue
selectedOptions
style
submit
text
uniqueName
value
visible
attr
checked
click
css
disable
enable
event
hasfocus
html
options
optionsText
optionsValue
selectedOptions
style
submit
text
uniqueName
value
visible
attr
checked
click
css
disable
enable
event
hasfocus
html
options
optionsText
optionsValue
selectedOptions
style
submit
text
uniqueName
value
visible
attr
checked
click
css
disable
enable
event
hasfocus
html
options
optionsText
optionsValue
selectedOptions
style
submit
text
uniqueName
value
visible
Any truthy
expression
<p data-bind="if: lines().length > 0">
Total value: <span data-bind="text: my.formatCurrency(grandTotal())"></span>
</p>
<section data-bind="foreach: sessions">
For every session,
render this article
<article>
<img data-bind="attr: { src: speaker().imageName }" class="img-polaroid"/>
<span data-bind="text: timeSlot().name"></span>
<span data-bind="text: room().name"></span>
<small data-bind="text: level" class="right"></small>
<small data-bind="text: track().name" class="right"></small>
<small data-bind="text: code" class="right"></small>
<h1 data-bind="text: title"></h1>
<address data-bind="text: speaker().fullName"></address>
<small data-bind="text: tagsFormatted"></small>
</article>
</section>
Custom Bindings
Just Another
Binding
ko.bindingHandlers.fadeVisible = {
init: function (element, valueAccessor) {
Runs first time the
binding is evaluated
},
update: function (element, valueAccessor, allBindingsAccessor) {
}
};
Runs after init and every time
one of its observables changes
1 Bound DOM
element
2 Value passed
to the binding
3 All bindings
4
on same element
The
viewmodel
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();
}
};
Use
Breakpoints