What is knockout.js and how is it different from jQuery
Hi everyone in this article I’m explaining about how to
difference between jQuery.
element against data model. Knockout.js is provide simple way to data binding
mechanism between your data model and UI. If you do any changes in your data
model your UI part automatically reflected and if you do any change in your UI
part your data model is automatically reflected.
Why we use Knockout:
Consider a simple example of shopping cart interface for an
e-commerce website. When the user add many items in cart and now user want to
remove two items in cart that time remove the item from the underlying data
model and remove the associated html elements from the shopping cart and also
update the total price. If you are not use knockout.js 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 allows you to bind the elements of UI to the data model in a
cause broken code if you later change the DOM hierarchy or element IDs. But
with declarative bindings even if you change the DOM then all bound elements
stay connected. You can bind data to a DOM by simply including a data-bind
attribute to any DOM element.
Dependency Tracking: 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.
Templating: 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
Extensible: 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 library and technology.
Knockout vs JQuery:
It allows you to easily bind raw data to a model and update elements bound to
JQuery is DOM manipulation framework that has made
Why we use knockout:
If your application actually has some business
rules that need encapsulating, knockout will provide you an easy way to do it.
much faster and easier to test only the viewmodel without any actual HTML in
the back. You could potentially run something like phantomjs to test your
If you are going to reuse part of the model in
other bits of HTML or simply if your HTML is still changing a lot.
If you ned to be able to serialize your whole
model In JSON to send to the server.