Knockoutjs

When you want your single HTML page to be highly responsive to user behaviour on the page, it is time to give a little thought to knockoutjs. Knockoutjs is a great Javascript library which gives you control to create rich, responsive, and purely on-page data-driven functionality. When a section of an HTML page changes, the knockoutjs activates a certain code that you can write in a plain-old javascript code. It uses MVVM (Model-View View-Model) paradigm, which is actually a real-time form of MVC (Model View Controller).

Some simple but powerful features:

It is a pure Javascript library with no dependency on any other javascript library. You download it, link it from the CDN etc and all you need is this library, any of your web-frameworks (WordPress, Joomla, Drupal, Django etc), and it will work as a simple drop-in. It has a small footprint, which means it will be available as soon as it is requested by your HTML code. It also works on all the major/minor browsers (the list is very comprehensive and its style is BDD).

JSON and Knockoutjs

JSON manipulation is really complex in many of the programming languages, but it has been used pretty easily in Javascript (perhaps one of the reason so many of us love Javascript). Knockoutjs makes it much more simple to work with JSON. You can easily query the JSON object, manipulate the UI based on filtration of this JSON object, do conditional logic, work with UI components totally driven by underlying JSON or data-model. And there are other features as well.

Knockoutjs and sisters

Knockoutjs, React, and AngularJS have a similar flavour of functionality but usability and the learning curve is quite different for each. Knockoutjs is very easy to learn since there are very few constructs that you need to know. AngularJS is very complex in understanding and there is a lot of programming burden on the developer. ReactJS, I haven’t used much but I have mostly heard from developers that it is a bit complex than Knockoutjs.

In order to learn Knockoutjs, you need to learn 3 concepts viz. Observables & Dependency Tracking, Declarative Bindings, and Templating.

Observables in Knockoutjs

Observables are knockoutjs way of monitoring the DOM elements on the HTML page. It observes each element on which there is a dependent code. As soon as there is a change in that observable element, it triggers that specific code. You create code that observes you need to create a view model first. A view model is simply a function or any object which can be tied to the Knockoutjs. And then you use a simple data-bind declaration in your UI elements and activate the binding through Knockoutjs.

Here is an example of a view model

Here is what you will define the data-binder in your HTML code

And then you apply the binding using

When you run your HTML it will produce the following result

Now comes the observable. Remember observables allow you make changes to the UI automatically.

Let’s update our view model to use observables

You don’t need to change the HTML you wrote using data-bind attribute. Whenever site or article value changes in any javascript function or call, it will be automatically updated in the UI e.g. one can call myNeatViewModel.site(“zmeer”) and your UI will display this new value.

There are many data-bindings available to you, and you can read it in its documentation. Plus, you can also create your own bindings as well.

Conclusion

This article covers somewhat 25 percent of Knockoutjs, and you can see how simple and powerful it is. The learning curve is not that steep so you will enjoy as you go along.