consider a simple example of shopping-cart interface for an e-commerce website. When the user deletes an item from the shopping cart, you have to remove the item from the underlying data model and remove the associated html element from the shopping cart and also update the total price. If you are not using
knockout for doing this you have to write event handlers and listeners for dependency tracking.
The Knockout.js provides a simple and convenient way to manage this kind of complex, data-driven interfaces. Instead of manually tracking, each element of the HTML page rely on the affected data and will automatically updated the DOM when any changes to the data model occurs.
This automatically updates the right parts of your UI whenever your data model changes. This is achieved by the two way bindings and special type of variables called
observables. You don’t worry about adding event handlers and listeners for dependency tracking.
This comes in handy when your application becomes more complex and you need a way to display a rich structure of view model data, thus keeping your code simple.
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.
This implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code. Knockout is also flexible to integrate with other libraries and technologies.
Knockout VS jQuery
Knockout.js is not a replacement of jQuery, Prototype, or MooTools. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality (however, Knockout.js can parse the data received from an AJAX call). Knockout.js is focused only on designing scalable and data-driven UI.
Moreover Knockout.js is compatible with any other client-side and server-side technology. Knockout.js acts as a supplement to the other web technologies like jQuery, MooTools.
MVVM Design Pattern
Knockout.js uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data (UI) and ViewModel acts as the intermediary between the model and the view.