DEV Community

PARMITA UPADHYAY
PARMITA UPADHYAY

Posted on

Learn about knockoutJS

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.
Knockout. js creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.
Syntax :

Image description
View Model :

Image description
OUTPUT :

Image description
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.

Nowadays developers prefer using Vue.js...
but these are some advantages of using knockout.JS:

  • 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.

Top comments (0)