Introduction to KnockoutJS

BASIC INTRODUCTION:
Knockout is a library written in JavaScript and based on MVVM (MODEL VIEW VIEWMODEL) pattern. It helps in building rich and responsive websites. It works with any framework and handles data driven interfaces.
KO is the abbreviated name of Knockout. The KO library file is small and light-weight.

PREREQUISITES:
HTML, CSS, JAVA SCRIPT, DOCUMENT OBJECT MODEL(DOM), TEXT EDITOR (any).

FEATURES:

• Trivially Extensible – Extends Custom Behavior easily.
• Dependency Tracking – Relation between KO Attributes and library functions is transparent.
• Declarative Binding – DOM Elements are connected to the model through Data-Bind Attribute.
  OR
  It allows us to bind the HTML Elements of UI to any Data Model. (Usually, Responsiveness is achieved
  through this).
• Automatic UI Refresh – Changes made to View the model data is reflected in UI automatically and
  vice-versa.
• It is very Compact and is around 13KB after zipping.
• Works on Mainstream Browser.

SYNTAX:

Let us consider a Basic program:

VIEW:

VIEW MODEL:

OUTPUT:

Discussion for the Program:
VIEW:
We have an input box: What is your Name. This variable is initialized with value What is your Name View Model, i.e.,
First Line indicates that we are inputting data using the data-bind attribute, i.e. we are using HTML controls, to make the data editable but this won’t update the data at the time of showing Name on Screen.
Second Line is just printing Name on the Screen, this is how we are binding values from View Model to HTML elements using ‘data-bind’ attribute in the body section. Here, ‘Name’ refers to the View Model variable.
VIEW MODEL:
First Line is just a name to a function (This is how functions are written).
The Third Line is assigning to View Model properties.
The fifth Line is the binding View Model to View.

SETTING UP THE ENVIRONMENT:
To use KnockoutJS, refer the JavaScript file using tag in HTML pages.
How to Access KnockoutJS:
1. Download Production Build of KnockoutJs from its official Website: https://knockoutjs.com/downloads/
2. Refer to KnockoutJS library from CDNS
3. Refer to the minified version of the KnockoutJS library from CDNS.

ADVANTAGES :

• Feasible to connect anytime with the UI elements in the data model.
• Ensures application of business rules, data security and more control on the webpage.
• Offers referential integrity and many validation features in regard to the workflow for additional
  security.
• Supports event-driven programming model and offers 100% customization.
• Create complex and dynamic data models with ease.

DISADVANTAGES :

• Knockout is only for two-way data-binding, automatic UI refresh as data change, this means that we
  need another library or tool for other needs, such as hash-based routing, UI components and so on.
• Hard to use templates that exist on external files, this would make developers hard to co-work.