The drawback of Knockout.js

Knockout.js is a good framework for building single page applications. But, it has a few drawbacks. But before going over the drawbacks, we will discuss the problem that it solves.

Too many View Models

With Knockout.js, we create a View Model. Then bind the View Model to the HTML elements. Whenever the data within the View Model changes, the framework updates the view or HTML elements. Event handlers update the data within the View Model.

One of the big drawbacks of using Knockout.js is the proliferation of View Models. Some web applications do not have a consistent way of representing data. This causes the number of View Models to increase dramatically.

Consider a Employee model. We render it in a custom list format and a standard tabular format. These are two different views for rendering the same employee data. Behind the scenes, we create two javascript View Models.

Creating multiple view models with annoying amounts of similarity is a big drawback of Knockout.js. To avoid complexity, we use copy-paste code to create multiple View Models. JavaScript inheritance is not for everyone. And some of class hierarchies become quite complex over time.

Binding expressions

Another drawback of Knockout.JS is the learning curve. At the outset, there is not much. We decorate HTML with data-bind attributes. And we define our property as observables. But sometimes, all of this becomes hard to debug.

Though the data-bind attribute is all we do to decorate, we have to learn the syntax behind the expression.

There are <span data-bind="text: myItems().length"></span> items
<button data-bind="enable: myItems().length < 5">Add</button>

HTML gets interspersed with JavaScript. It is more like Angular in that way. Angular has multiple directives each doing its specific thing. But in Knockout, the data-bind attribute is everywhere. But the expression within it varies. Simple bugs crop up in unexpected places.