Hansi Pabasara
Introduction to Knockout js
3 min readFeb 18, 2020

--

What is Knockout.js?

Knockout is a JavaScript library that allows binding HTML elements against any data model, and based on MVVM pattern that lets you create rich, responsive user interfaces for the display and editor with a clean underlying data model. Knockout.js is compatible with any type of client side or server-side technologies.

The key features in the Knockout.js are:

· Declarative Binding — HTML DOM elements are linked to the model using a very simple syntax, using a data-bind attribute. Using this feature, it’s made easy to achieve responsiveness. Able to create custom bindings inside data bind.

· Dependency Tracking — Relation between the KO attributes and the functions / components of the KO library is clear. Tracks data changes in the KO attribute automatically and updates the respective affected areas.

· Automatic UI Refresh — When a change is made in the view model, it automatically changed in the UI and vice versa.

· Templating — It is a best way to build complex UI structures.

· Extensible — This implements customized behaviors in just a few lines of code as new declarative bindings for easy reuse.

Benefits of Using Knockout.js

· Able to create complex dynamic data models easily.

· When there is a change in the data model it automatically updates the UI.

· It’s a pure JavaScript library as it works with any server or client-side technology.

· It works on all mainstream browsers (Internet Explorer, Chrome, Firefox)

Why we have to use Knockout?

If we consider an example of order a meal interface in order meals online website, when the user cancel an order from the system, we have to remove the item data model and associated html elements from the order meal interface and change the total price. If we don’t use knockout to do this, you will write event handlers and listeners for monitoring the dependence.

We can manage this kind of complex problems using Knockout.js. Because it automatically tracks the dependencies between HTML elements and their underlying data.

Knockout Vs jQuery

Knockout is a similar JavaScript library like jQuery. Knockout is using MVVM framework while jQuery is using DOM manipulation framework. Main purpose of jQuery is to make JavaScript developer friendly and the purpose of knockout is to bind raw data to a model which will make it easy for the developers. Knockout.js acts as an addition to other Web technologies such as jQuery, MooTools.

Conclusion

Knockout.js is no substitute for jQuery as you have understood from the part of their application. There is no a competition between the two and a developer should work side by side with both of them. Using jQuery, it saves the time for the developer while using knockout it mainly helpful in data binding. And also there is minimum need of coding as many issues are automatically implemented, like updating necessary changes in UI and backend through vice versa.

--

--

Hansi Pabasara
Introduction to Knockout js

Software Engineering Graduate at Sri Lanka Institute of Information Technology(SLIIT) || Associate Software Engineer at Orel IT