Fundaments of Knockout js

Fundamentals of Knockout JS
26 march 2014, Timisoara

Flavius-Radu Demian
Software developer, Avaelgo
I really like programming, web and mobile especially.
Please feel free to ask questions any time and don’t be shy because
Knowledge is power 
flaviusdemian91@yahoo.com | flavius.demian@gmail.com | @slowarad

Expectations
Learn how the MVVM pattern works
Learn the basics of Knockout JS
Learn the advantages and limitations of Knockout JS => when to
use it and when not to
Understand that knockout want to be friends to everyone 

Expectations
And the most important expectations is:
Make you curious  => go home and try it and/or
convince your PM at work in order for him to let you use it

Agenda
The MVVM Pattern
Welcome to Knockout
Headline Features
Bindings
Templates
Mapping and unmapping
Navigation
Testing
Samples
Conclusions

Whats is MVVM
The Model-View-View Model (MVVM) pattern is a software architectural design
pattern.
This pattern emerged in 2005 to support the inherent data binding functionality
offered by XAML subsystems such as WPF and Silverlight.
Related patterns: MVC ( ex: asp .net mvc), MVP ( ex: windows forms) . MVVM (
ex: WPF, Silverlight) is based on MVC and it is a specialization of MVP.
More explanations at this link.

What is MVVM - Model
The Model encapsulates the domain model, business logic and may include data
access.
User
{
username,
firstname,
lastname,
email
}

What is MVVM - View
The view is the application’s User Interface (UI).
It defines the appearance of the UI and its visual elements and controls such as
text boxes and buttons.
The view may also implement view behavior such as animations and transitions.

What is MVVM - ViewModel
The view model is responsible for holding application state, handling
presentation logic and exposing application data and operations (commands) to
the view such (ex: LoadCustomers).
It acts as the intermediary ( glue) between the view and model.
The view model retrieves data from the model and exposes it to the view as
properties in a form that the view can easily digest.

MVVM Benefits
As with other separation patterns such as MVC, MVVM facilitates the
separation of concerns.
The advantages of separating concerns in the MVVM manner include the
facilitation of the following:
Developer/Designer Collaboration without Conflict
Testable Code
Code Maintainability

Knockout JS
Knockout is a JavaScript library that helps you to create rich, responsive display
and editor user interfaces with a clean underlying data model.
Any time you have sections of UI that update dynamically (e.g., changing
depending on the user’s actions or when an external data source changes), KO
can help you implement it more simply and maintainably.
http://knockoutjs.com

Knockout JS
Some teasers:
http://knockoutjs.com/examples/cartEditor.html
http://knockoutjs.com/examples/betterList.html
http://knockoutjs.com/examples/animatedTransitions.html
http://learn.knockoutjs.com/WebmailExampleStandalone.html

Headline features
Elegant dependency tracking - automatically updates the right parts of your UI
whenever your data model changes.
Declarative bindings - a simple and obvious way to connect parts of your UI to
your data model. You can construct a complex dynamic UIs easily using
arbitrarily nested binding contexts.
Trivially extensible - implement custom behaviors as new declarative bindings
for easy reuse in just a few lines of code.
Compact - around 13kb after gzipping

Headline features
Pure JavaScript library - works with any server or client-side technology
Can be added on top of your existing web application without requiring major
architectural changes
Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
Open source
Great community

Bindings
Data-bind attributes in html
ko.observable() for the properties
ko.computed() for mixes between properties and/or strings
ko.applyBindings() to activate bindings

Simple Binding Example
<div data-bind=“text: message”></div>
function viewModel () {
this.message: ko.obersvable(“Hello World”);
}
ko.applyBindings(viewModel);

Bindings
Observable is a function !
Do not to this:
viewModel.message = ‘hi’;
Do this:
viewModel.message(‘hi’);

Most used bindings
Text
Today's message is: <span data-bind="text: myMessage"></span>
Value
Today's message is: <input type=‘text’ data-bind=“value: myMessage“/>
Html
<div data-bind="html: news"></div>

Most used bindings
Css
<p data-bind="css: sendByMe == false ? 'bubbleLeft' : 'bubbleRight‘ ”></p>
Style
<p data-bind="style: { color: value < 0 ? 'red' : 'black' }"></p>
Attr
<a data-bind="attr: { href: url, title: title}">Custom Link</a>

Control Flow Bindings - foreach
<ul data-bind="foreach: people“>
<li> <p data-bind="text: firstName"></li>
<li> <p data-bind="text: lastName"> </li>
</ul>
ko.applyBindings({
people: [ { firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' }]
});

Control Flow Bindings - If
<ul data-bind="foreach: planets">
<li>Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b></div>
</li>
</ul>
ko.applyBindings({
planets: [ { name: 'Mercury', capital: null },
{ name: 'Earth', capital: { cityName: 'Barnsley' } } ]
});

Form Fields Bindings - click
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
var viewModel = {
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};

Form Fields Bindings - event
<div data-bind="event: { mouseover: showDetails, mouseout: hideDetails }">
Mouse over me </div>
<div data-bind="visible: detailsShown "> Details </div>
var viewModel = {
detailsShown: ko.observable(false),
showDetails: function() {
this.detailsShown(true);
},
hideDetails: function() {
this.detailsShown(false);
} };

Form Fields Bindings - submit
<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
</form>
var viewModel = {
doSomething : function(formElement) {
// ... now do something
}
};

Form Fields Bindings - enable
<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
<span> I have a cellphone </span>
</p>
<p> Your cellphone number:
<input type='text' data-bind="value: cellNumber,
enable: hasCellphone" />
</p>
var viewModel = {
hasCellphone : ko.observable(false),
cellNumber: ko.observable(“”)
};

Form Fields Bindings - hasFocus
<input data-bind="hasFocus: isSelected" />
<span data-bind="visible: isSelected">The textbox has focus</span>
var viewModel = {
isSelected: ko.observable(false),
setIsSelected: function() {
this.isSelected(true)
}
};

Form Fields Bindings - checked
<p>Send me spam:
<input type="checkbox" data-bind="checked: wantsSpam" />
</p>
var viewModel = {
wantsSpam: ko.observable(true) // Initially checked
};
// ... then later ...
viewModel.wantsSpam(false); // The checkbox becomes unchecked

Form Fields Bindings – checked
<div data-bind="visible: wantsSpam"> Preferred flavor of spam:
<div>
<input type="radio" name=“group" value="cherry" data-bind="checked: spamFlavor" /> Cherry
</div>
<div>
<input type="radio" name=“group" value="almond" data-bind="checked: spamFlavor" /> Almond
</div>
</div>
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // selects only the Almond radio button
};
viewModel.spamFlavor("cherry"); // Now only Cherry radio button is checked

Form Fields Bindings - options
<span>Destination country: </span>
<select data-bind="options: availableCountries"></select>
var viewModel = {
// These are the initial options
availableCountries: ko.observableArray(['France', 'Spain'])
};
// ... then later ...
viewModel.availableCountries.push('China'); // Adds another option

Templates
There are two main ways of using templates: native and string based
Native templating is the mechanism that underpins foreach, if, with, and other
control flow bindings.
Internally, those control flow bindings capture the HTML markup contained in
your element, and use it as a template to render against an arbitrary data item.
This feature is built into Knockout and doesn’t require any external library.

Templates
String-based templating is a way to connect Knockout to a third-party
template engine.
Knockout will pass your model values to the external template engine and
inject the resulting markup string into your document.

String-based Templates
Jquery.tmpl

Mapping
All properties of an object are converted into an observable. If an update would
change the value, it will update the observable.
Arrays are converted into observable arrays. If an update would change the
number of items, it will perform the appropriate add/remove actions
var viewModel = ko.mapping.fromJS(data);
// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

Unmapping
If you want to convert your mapped object back to a regular JS object, use:
var unmapped = ko.mapping.toJS(viewModel);
The mapping and unmapping will also try to keep the order the same as the
original JavaScript array/ observableArray.

Helpers
ko.utils.arrayFirst
ko.utils. arrayFilter
ko.utils.arrayForEach
ko.utils.arrayGetDistinctValues
ko.utils.arrayIndexOf
ko.utils.arrayPushAll
ko.utils.unwrapObservable
unshift – insert at the beggining, shift – removes the first element, reverse, sort,
splice, slice
and lots more…

Navigation
You can implement navigation with Sammy JS ( for example)
http://learn.knockoutjs.com/#/?tutorial=webmail

Validation
You can use Knockout Validation ( for example):
https://github.com/Knockout-Contrib/Knockout-Validation
Support for :
required, min , max, minLenght,
maxLenght, email, pattern, step, date,
number, digit, date, equal, not eqal
http://jsfiddle.net/slown1/bzkE5/2/

Testing
You can use Jasmine and Phantom JS ( for example):
http://kylehodgson.com/2012/11/29/knockoutjs-and-testing/
describe("Person Name", function() {
it("computes fullName based on firstName and lastName",
function() {
var target = new PersonNameViewModel("Ada","Lovelace");
expect(target.fullName()).toBe("Ada Lovelace");
});
});

Let’s see some code
My Demo 
http://193.226.9.134:8000/MobileServicesWebDemo/

Conclusions
Elegant dependency tracking
Declarative bindings
Trivially extensible
Pure JavaScript library
Can be added on top of your existing web application
Works on any mainstream browser Open source
Great community
Developer/Designer
Collaboration without Conflict
Testable Code

More samples
http://knockoutjsdemo.apphb.com/Example/HelloWorld
http://learn.knockoutjs.com/#/?tutorial=intro

Fundaments of Knockout js

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Fundaments of Knockout js (20)

More from Flavius-Radu Demian (10)

Recently uploaded (20)

Fundaments of Knockout js