Introduction to KnockoutJS

Introduction:
I am going to share a brief introduction about a web technology called “KnockoutJS” which I learned during one of my project experiences.

• KnockoutJS is a pure JavaScript framework library that can be used in any Web Applications built on any web platform that mainly deal with the Data manipulation and the UI.
• KnockoutJS underlying architecture was created based on the MVVM (Model-View-ViewModel) design pattern, going forward we will discuss more in detail about MVVM.
• KnockoutJS works on all web browsers (cross-browser compatibility) without any additional or external dependencies.

One can have a question in mind that Why KnockoutJS as we already have a robust client library called “JQuery”?
Correct JQuery serves the purpose that most of the client side needs efficiently going in detail through the DOM model and event handlers.
Whereas KnockoutJS is intended to serve the purpose of dealing with large amounts of data updates and presentation on the UI with automatic refresh capability.
Key features of KnockoutJS:

• Bindings
• Observables
• Automatic UI Refresh
• Dependency Tracking
• Template Support

Before proceeding in detail with KnockoutJS features let’s take an overview of MVVM design pattern as one should have a basic idea about MVVM to understand KnockoutJS.
MVVM Overview:
There are mainly 3 components in MVVM pattern viz.,

1. Model
2. View
3. ViewModel

The following diagram will give you the complete picture of MVVM design pattern:

Now let’s go into detail about the KnockoutJS features.
Declarative Bindings:
This is one of the powerful features of KnockoutJS. For example, let us assume we need to display some Customer information on UI. Create a simple View Model called customer model JavaScript object and simply reference the following JavaScript file as a reference in your web page using script tag:


Now create a simple View of the above ViewModel in the UI.

The function call “ko.applyBindings(customerModel) will initialize the declarative bindings, i.e., customerModel object to the corresponding UI fields.
Observables:
Another powerful feature of KnockoutJS is Observables. The Observable feature is used to automatically update the View (UI) when the View Model changes.
For example, the following View Model will update View without changing the UI Model:

To read the current value of the observable for example customer first name from the above example, simply make the call without parameter as follows:

To write a new value to the observable, just pass the value as a parameter to the observable for example customer city from the example, make the call with parameter as follows:

Automatic UI Refresh:
With the bindings concept, Knockout has full control over the data properties that are mapped to the UI elements and keeps track of all the changes to the data over UI and Model. Using this principle Knockout provides the coolest feature called Automatic UI Refresh, i.e., the UI will automatically get updated when data changes in the Model.
For example, let us consider an array of Customers that supposed to be modified with a button click.

The code snippet below shows the declaration of Observable Array – customerModelList

When we click on Add Customer button, the function AddCustomer () from the following code will be invoked, and the data will be added to the Observable Array. Here shows the magic of Knockout as the UI will be automatically refreshed as the model data get updated and displays the new customer record added to the Customer Information List on the UI.

Computed Observables and Dependency Tracking:
Suppose we want to add two numbers and return the value as a sum using two different observables. For example, the following code snippet AddNumbers () function will simply return the computed total of two observable numbers using ko.computed observable function.

The underlying Dependency Tracking Principle in Knockout is whenever we declare a computed observable; Knockout will immediately invoke its evaluator function to get its initial value. While the evaluator function is running, Knockout sets up a subscription to any observables that the evaluator reads. The subscription callback is set to cause the evaluator to run again, looping the whole process back to the beginning. Then Knockout notifies any subscribers about the new value of your computed observable.
Template Binding:
Knockout supports two types of template bindings:

• Native templating: This is built in feature of Knockout and works with control flow bindings internally which capture the HTML markup contained in the element, and use it as a template to render against an arbitrary data item.
• String-based templating: Knockout will pass the model values to the connected external template engines like “jquery.tmpl” and inject the resulting markup string into the document.

Conclusion:
We have covered most of the crucial features of Knockout so far. Let’s review quick summary points:

• Knockout a pure JavaScript library that offers powerful features like declarative bindings, observables, automatic UI refresh, dependency tracking and template support.
• Works on all web platforms with cross-browser compatibility.
• Provides ability to clean code and separation of concerns.
• Knockout mainly deals with complex data manipulations rather than controls and events.

Finally, Knockout is a powerful library – easy to learn – developer friendly!
Contact us today for more information
Prasanna Kumar Attili, Tech Lead@YASH Technologies

• Data manipulation
• JavaScript framework library
• KnockoutJS
• UI
• Web Applications