Knockout.js and how it is different from jQuery
Knockout.js is a javascript library that allows us to bind html elements against any data model. It provides a simple two-way data binding mechanism between your data model and UI means any changes to data model are automatically reflected in the DOM(UI) and any changes to the DOM are automatically reflected to the data model.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling and animation much simpler.
Consider the below example, it will help you to understand the main difference between both these library’s.
This is a simple jQuery code for inputting name in a text box and that will automatically reflect to the view while typing. for this functionality we need a key press function, a code to take the value from the text box and also we need a code for applying this value to the display. Simply saying for the above functionality we have used 5 lines of code.
The same above functionality that is done in Knockout, Now feel the difference its just a 3 simple lines of code.
Now come to the code explanation :
One of the key benefits of KO is that it updates your UI automatically when the view model changes. How can KO know which parts of your view model change? Answer: you need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.
Here, we declare ‘yourName’ as observable. so when the text box value changes that will automatically reflected in the view.
valueUpdate:”afterkeydown’’ parameter replace the key press function in the jQuery.
Knockout is not a replacement of jQuery. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. 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.
