knockout.js explained

Introduction

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., changes depending on the user’s actions or when an external data source changes), KO can help you implement it in a simple yet robust way.

Headline Features

• Declarative Binding• Automatic UI Refesh• Dependency Tracking• Templating

Additional Features

• Pure Javascript Library• Compact (around 13kb after gzipping)• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)

Some Questions

1. Is KO intended to compete with jQuery (or Prototype, etc.) or work with it?

2. How is Knockout different?

To Summarise

KO doesn’t compete with jQuery or similar low-level DOM APIs. KO provides a complementary, high-level way to link a data model to a UI. KO itself doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions.

• Download the latest version of the Knockout JavaScript file

• Reference the file using a <script> tag somewhere on your HTML pages

<script type='text/javascript' src='knockout-2.1.0.js'></script>

How To Use

• MVVM & View Model• Observables• Bindings• Templates and Customization

Key KO Concepts

To create a view model with KO, just declare any JavaScript object. For example,

var myViewModel = { personName: 'Bob', personAge: 123};

View Models

Example to create a very simple view of that view model using a declarative binding :

The name is <span data-bind="text: personName"></span>

Using ViewModel inside a View

ko.applyBindings(myViewModel); That does it! Now, view will display as if you’d written the

following HTML:

The name is <span>Bob</span>

Activating knockout.js

Question: How can KO know when parts of your view model change?

Answer: You need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.

Observables

var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};

Declaring Observable Properties

• To read myViewModel.personName()• To write myViewModel.personName('Mary') • To write values to multiple observable properties

myViewModel.personName(‘PN1').personAge(50)

So, when we write data-bind="text: personName", the text binding registers itself to be notified when personName changes (assuming it’s an observablevalue, which it is now).

R/W Observable Properties

• .subscribe() function• .dispose() function

Explicitly Subscribing to observables

These are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change.

function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this);}

Computed Observables

Computed Observable – Decomposing User Input

Computed Observable – A value converter

Computed Observable – Filtering and validating user input

Determining if a property is a computed observable

Observable Arrays

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.

Reading Information from an Observable Array

// This observable array initially contains three objectsvar anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" }]);

Functions for Observable Collection indexOf, slice, pop, push, shift, unshift, reverse, sort, splice, remove,

removeAll, destroy, destroyAll

Knockout built in Bindings -

1. Controlling text and appearance2. Control Flow3. Working with Form Fields

Controlling text and appearance

• The visible binding• The text binding• The html binding• The css binding• The style binding• The attr binding

The visible binding

The text binding

The html binding

The css binding

The style binding

The attr binding

Controlling Flow

• The foreach binding• The if binding• The ifnot binding• The with binding

The foreach binding

The if binding

The ifnot binding

The with binding

Working with Form Fields

• The click binding• The event binding• The submit binding• The enable binding• The disable binding• The value binding• The hasfocus binding• The checked binding• The options binding• The selectedOptions binding• The uniqueName binding

The click binding

Allowing the default click action

• By default, Knockout will prevent the click event from taking any default action.

• However, if you do want to let the default click action proceed, just return true from your click handler function.

Preventing the event from bubbling

<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button></div>

The event binding

The submit binding

The enable binding

The disable binding

This is the mirror image of the enable binding.

The value binding

The hasFocus binding

The checked binding

The options binding

The selectedoptions binding

The uniqueName binding

Thanks, Sumit Rathee & Mohit Kumar sumit.rathee@paxcel.net mohit.kumar@paxcel.net Website: www.paxcel.net

* The content of this presentation is derived from knockout official website documentation and samples: http://knockoutjs.com/