Knockout JS

  Melvin       January 29, 2020

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers in building rich and responsive websites. KnockoutJS library provides an easy and clean way to handle complex data-driven interfaces. It is independent of any other framework. This tutorial covers most of the topics required for a basic understanding of KnockoutJS and explains its various functionalities. KO is an abbreviation used for KnockoutJS.Knockout JS is introduced in 2010 by Steve Sanderson.

Why KnockoutJS?

KnockoutJS library provides an easy and clean way to handle complex data-driven interfaces. One can create self-updating UIs for Javascript objects.

It is a pure JavaScript library and works with any web framework. It's not a replacement for Jquery but can work as a supplement providing smart features.

KnockoutJS library file is very small & lightweight.

It is independent of any other framework and is compatible with other client or server-side technologies.

Most important of all KnockoutJS is open source and hence free for use.

KnockoutJS is fully documented. The official site has full documentation including API docs, live examples, and interactive tutorials.

View

The view is nothing but the User Interface created using HTML elements and CSS styling. You can bind HTML DOM elements to the data model using KnockoutJS. It provides 2-way data binding between View and ViewModel using the 'data-bind' concept, which means any updates done in UI are reflected in the data model and any changes done in the data model are reflected in UI. One can create a self-updating UI with the help of knockout.

ViewModel

ViewModel is a Javascript object which contains necessary properties and functions to represent data. View and ViewModel are connected together with the declarative data-bind concept used in HTML. This makes it easy to change HTML without changing ViewModel. KnockoutJS takes care of automatic data refresh between them through the use of Observables.

Synchronization of data is achieved through binding DOM elements to Data Model first using data-bind and then refreshing these 2 components through the use of Observables. Dependency tracking is done automatically due to this synchronization of data. No extra coding is required to achieve it. KnockoutJS allows you to create a direct connection between your display and underlying data.

You can create your own bindings called custom bindings for application-specific behaviors. This way knockout gives direct control of how you want to transform your data into HTML

Model

Model is domain data on the server and it gets manipulated as and when a request is sent/received from ViewModel.

The data could be stored in a database, cookie or other forms of persistent storage. KnockoutJS does not worry about how it is stored. It is up to the programmer to communicate between stored data and KnockoutJS.

Most of the times data are saved and loaded via an Ajax call.

Observable Variables

We can declare an observable variable by using the below format

this.variable=ko.observable(value);

Eg:

Observable Array

The observable declaration takes care of data modifications of a single object. ObservableArray works with the collection of objects. This is a very useful feature when you are dealing with complex applications containing multiple types of values and changing their status frequently based on user actions.

We can declare an observable array by using the following format

this.arrayname=ko.observableArray();

Disadvantages

Knockoutjs has no routing.

Used to control lower complexity applications.