KnockoutJS was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee on July 5, 2010. KO is basically a library written in JavaScript, based on MVVM pattern that helps developers build responsive and rich websites. The model separates the application’s Model, View (UI) and View Model (JavaScript Representation of model). Let we discuss about features of KO.

Features of KnockoutJS

Elegant Dependency Tracking

Knockout automatically updates the right parts of your UI whenever your data model changes. You no need to worry about adding event handlers and listeners for dependency tracking like in Jquery.

Extensible

This implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code. KnockoutJS is independent of any other framework and it is compatible with other client or server side technologies.

Templating

Knockout can use alternative template engines for its template binding. Knockout has a native, built-in template engine which you can use right away and can be customize how the data and template are executed to determine the resulting markup.

Benefits of KO

If we implement KO with your web application then we can get the following benefits:

  • Easily we can create complex dynamic data model.
  • Anytime we can connect UI elements with data model which is synchronized.
  • Automatically UI will update when Data Model is changed. If any UI changed by user or in back-end then Data Model will change automatically.
  • It support event-driven programming model.
  • It mainly support all the browsers(Internet Explorer, FireFox, Crome, Safari).

KO with MVVM

What is MVVM?, the full form of MVVM is Model View ViewModel. It is an architectural design pattern designed by Microsoft and mainly created for WPF/Silverlight applications. KO builts on MVVP architectural design pattern. So if you want to understand KO properly, then you should know about MVVM.

Overview of MVVM:

MVVM stands for Model,View, ViewModel.

Model: Responsible for holding Application data. In simple, its refers either to a domain model or to the data access layer, which represents content

View: Responsible for presenting model data to the user. Its nothing but a User Interface which is getting information from the user.

ViewModel: Connector of Model and View. Main responsibility is to establish communication with View and Model. It holds data and function.Functions manipulate that data and it reflect to the UI. When data is changed in UI by the user, then data will be changes.If data is changed by the back-end then the UI will change accordingly. ViewModel will do it for us with the help of data-binding concept.

knockout js mvvm

practice knockout

MVVM Benefits

  • Provide more flexibility of designer and developer works.
  • The ViewModel is easier to unit test than code-behind or event-driven code.
  • Provide flexibility to change user interface without having to re-factor other logic of the code base
  • The presentation layer and the logic is loosely coupled.

Other Popular Articles