Mvvm and KnockoutJS

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference

Stands for Model-View-ViewModel
Not technology specific
Awesome with data binding!
MVVM is, foremost, a separation pattern

Basically just a JavaScript object
Represents the data

A user friendly presentation of content
The HTML representation layer

Contains properties, methods and model
model
Holds the behavior and data for the view
var myViewModel = {
name: ko.observable("Johnny"),
lastName: ko.observable("Tordgeman")
};

Helps create MVVM apps with observables
Knockout is a MVVM JavaScript framework

6+ 2+
Separates behavior and structure
Declarative bindings
Observables

Declarative
Bindings

Observables are special JavaScript
objects that can notify subscribers about
changes, and can automatically detect
dependencies.

Observable Computed
Observable
Array

<input data-bind="value: name" placeholder="Name" />
Declarative Binding
var myViewModel = {
name: ko.observable("Johnny")
};
Creating Observable
ko.applyBindings(myViewModel);
Binding the ViewModel
to the View

<section class="view-list" data-bind="foreach: games">
<article class="article-container-full-width">
<div>
<img data-bind="attr: { src: imageName }"
class="img-polaroid"/>
<span data-bind="text: Title"></span> <br />
Genre: <span data-bind="text: Genre"></span>
</div>
</article>
</section>

var firstName = ko.observable('Johnny');
alert(firstName);
alert(firstName());
Function
definition
Works!
firstName('Eyal');
firstName = 'Eyal';
Works!
firstName
became a
string

When You
Need a
Value That
Doesn’t
Exist in the
Web Service

var prdViewModel = {
id: ko.observable(1),
productPrice: ko.observable(199),
productQty: ko.observable(30),
productCurrency: ko.observable("$")
};
prdViewModel.sallery = ko.computed(function ()
{
return parseInt(this.productQty() *
this.productPrice()) + this.productCurrency();
}, prdViewModel);

Tracks
which
objects are
in the array

Text and
appearance

<input type="text"
data-bind="enable: allowEdit,
value: price" />
<select data-bind="options: colors,
value: selectedColor,
optionsText: 'name',
optionsValue: 'key'" ></select>
Built into
Knockout
Binding for
Element
Attributes
Multiple
Binding
Expression
s

attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visible

// Whenever the selectedProduct changes, reset the
selectedPrice property
viewmodel.selectedProduct.subscribe(function
() {
viewmodel.selectedPrice(undefined);
}, viewmodel);

<p data-bind="if: lines().length > 0">
Total value: <span data-
bind="text: my.formatCurrency(grandTotal())">
</span>
</p>

<div class="navbar-inner navbar-secondary">
<div class="btn-group" data-
bind="foreach: router.visibleRoutes">
<a data-bind="attr: { href: hash }, css:
{ active: isActive }, html: caption"
class="btn btn-info"></a>
</div>
</div>
For each visible route…
Bind the route link
Check if CSS should be
active
And its html to the
content of the link

Knockout provides us with three methods for custom post-
processing logic of our template:
afterRender
afterAdd
beforeRemove

Just Another
Binding

ko.bindingHandlers.yourBindingName = {
init: function (element, valueAccessor,
allBindingsAccessor, viewModel) {
// This will be called when the binding is first
applied to an element
},
update: function (element, valueAccessor,
allBindingsAccessor, viewModel) {
// This will be called once when the binding is
first applied to an element,
// and again whenever the associated observable
changes value.
}
};

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

While Knockout observables provides
the basic features necessary to support
reading/writing values and notifying
subscribers when that value changes,
you may wish to add your own logic to it.

ko.extenders.logChange = function (target, option) {
target.subscribe(function (newValue) {
console.log(option + ": " + newValue);
});
return target;
};
this.firstName = ko.observable("Bob").extend({
logChange: "first name" });

Super easy data binding
Allows for extensibility
Fun!

http://jpapa.me/teched13ko
http://johnpapa.net/SPA
http://knockoutjs.com/documentation/introduction.html
SPA with KnockoutJS

Mvvm and KnockoutJS

More Related Content

What's hot

Similar to Mvvm and KnockoutJS

Recently uploaded

Mvvm and KnockoutJS