KnockoutJS - Overview

What is KnockoutJS?

KnockoutJS is basically a library written in JavaScript that is based on MVVM pattern that helps developers building rich and responsive websites. This separates the application's Model (stored data), View (UI) and View Model (Javascript Representation of model).
KO is an abbreviation used for KnockoutJS.

KnockoutJS - Environment Setup

It's very easy to use KnockoutJS. Simply refer the Javascript file using <script > tag in HTML pages.
Knockout.js can be accessed in the following ways:

• You can download production build of Knockout.js from its official website:
  A page as in the following image will be displayed. Click on download link and you will get the latest knockout.js file.
  

KnockoutJS Application

KnockoutJS is widely used for Single Page Applications - A web site that is created with ability to retrieve all necessary data dynamically with a single page load reducing server round trips.
KnockoutJS is a client side framework. This is a Javascript library which makes it very easy to bind HTML to domain data. It implements a pattern called "Model-View-ViewModel"(MVVM). Observables is the magic ingredient of KnockoutJS. All data remains in sync because of Observable attribute.

KnockoutJS - MVVM Framework

Model-View-ViewModel (MVVM) is an architectural design pattern for developing software applications. MVVM was developed by Microsoft Architect John Gossman in 2005. This pattern is derived from Model-View-Controller (MVC) pattern. The advantage of MVVM is that it separates application layer's graphical user interface from business logic.

KnockoutJS - Observables

KnockoutJS is build upon 3 important concepts. Those are:

• Observables and dependency tracking between them - DOM elements are connected to ViewModel via 'data-bind'. These 2 exchange information through Observables. This automatically takes care of dependency tracking.
  

KnockoutJS - Computed Observables

• Computed Observable is a function which is dependent on one or more Observables and will automatically update whenever its underlying Observables (dependencies) change.
• Computed Observables can be chained.
  

KnockoutJS - Declarative Bindings

Declarative binding in KnockoutJS provides a powerful way to connect data to UI.
It is important to understand relationship between bindings and Observables. Technically these two are different. You can use normal JavaScript object as ViewModel and KnockoutJS can process View's binding correctly. Without Observable the property from UI will be processed only for the first time. In this case it cannot update automatically based on underlying data update. To achieve this, bindings must be referred to Observable properties.

KnockoutJS - Dependency Tracking

Dependency Tracking in KnockoutJS

KnockoutJs automatically tracks the dependencies when the values get updated. It has a single object called dependency tracker(ko.dependencyDetection) which acts as an intermediate between two parties for subscribing the dependencies.
The algorithm for dependency tracking can be shown as below:

KnockoutJS - Templating

Template is a set of DOM elements which can be used repetitively. Templating makes it easy to build complex applications due to its property of minimizing duplication of DOM elements.
There are 2 ways of creating templates:

KnockoutJS - Components

Components are a huge way of organizing the UI code for structuring a large application and promote code reusability.

• It is inherited or nested from other component.
• For loading and configuration, it defines its own conventions or logic.
• It is packaged to reuse throughout the application or project.
• Represents the complete sections of application or small controls/widgets.
• Loaded or preloaded on demand.