Fundamentals of Knockout JS

26 march 2014, Timisoara

Flavius-Radu DemianSoftware 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 KnockoutHeadline FeaturesBindingsTemplates Mapping and unmappingNavigationTestingSamplesConclusions

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

Bindings

Observable is a function !

Do not to this:

viewModel.message = ‘hi’;

Do this:

viewModel.message(‘hi’);

Most used bindings

TextToday's message is: <span data-bind="text: myMessage"></span>

ValueToday'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.

Native named template example

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.arrayFirstko.utils. arrayFilterko.utils.arrayForEachko.utils.arrayGetDistinctValuesko.utils.arrayIndexOfko.utils.arrayPushAllko.utils.unwrapObservableunshift – insert at the beggining, shift – removes the first element, reverse, sort, splice, sliceand 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 trackingDeclarative bindings Trivially extensiblePure JavaScript libraryCan be added on top of your existing web applicationWorks on any mainstream browser Open sourceGreat communityDeveloper/Designer Collaboration without ConflictTestable Code

Thanks

More samples

http://knockoutjsdemo.apphb.com/Example/HelloWorld

http://learn.knockoutjs.com/#/?tutorial=intro