As a developer, how will you simplify dynamic JavaScript UIs ?

knockout.js is a JavaScript library that helps you to create rich, responsive display and it helps you simplify dynamic JavaScript UIs using the Model-View-ViewModel pattern. Knockout.js (KO) can also help us to implement automatic updates of the right parts of our UI whenever the data changes more simply.

So what is really a MVVM pattern?

Model–view–view-model is a software architectural pattern. That facilitates  separation of the user interface via  markup language(view) from the business logic or back-end logic(model) and the view model is a value converter, meaning the view model is responsible for exposing the data objects from the model to the view.

 

Headline features:

• Elegant dependency tracking — automatically updates the right parts of your UI whenever your data model changes.
• Declarative bindings — a simple and obvious way to connect parts of your UI to your data model.

 

OK, how do you implement these features?

Now we are going to learn how to define a view and declarative bindings, its data and behaviour using viewmodels , and how everything stays in sync automatically. Consider the below example.

 

If we run the sample HTML code we can able to see the output as ‘Ben Tom’.

How to use bindings in view ?

 

Modify the <strong> elements in the view by adding data-bind attributes to display the person’s name.data-bind attributes are how Knockout lets you declaratively associate viewmodel properties with DOM elements. We just used the text binding to assign text to our DOM elements.

Now if you run this code we cannot able to see the output, for seeing the actual data we need to define a viewmodel for this view.

How to define a viewmodel ?

 

This is how a simple viewmodel looks like, here we have a JavaScript function containing data about the person. But since the browser doesn’t know what it means, we need to activate Knockout to make it take effect. To activate Knockout,we use

ko.applyBindings(ViewModel);

So now if we run this code we can able to see the output as ‘Ben Tom’.

take a look at this fiddle.

Additional benefits:

• Pure JavaScript library .
• Can be added on top of your existing web application.
• Works on any mainstream browser.
• Easy and Compact.
• Templating.

Knockout.js and how it is different from 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.

Consider the below example’s(Example 1 & Example 2), it will help us to understand the main difference between both these library’s.

Example 1: take a look at this fiddle.

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 event, 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.

Example 2:  take a look at this fiddle.

The same above functionality that is done in Knockout, Now feel the difference its just a 3 simple lines of code.

One of the key benefits of KO is that it updates our 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.

KnockoutJS — Templating/Components.

 

• Template is a set of DOM elements which can be used repetitively.
• Templating makes it easy to build complex applications due to its property of minimizing duplication of DOM elements.
• Components are a huge way of organizing the sophisticated UI code for large applications and promote code re-usability.

The main idea is that we can separate both the HTML elements and viewmodels(Can even separate as different files). In this way we can reuse them.

Consider the Example-1: take a look at this fiddle.

In the HTML there is a <select> element for dropdown list and there is a ‘data-bind’ attribute in the <select> with some couple of Binding element’s inside such as,

• ‘options’ — For hold the values in dropdown.
• ‘optionsCaption’ — For default text in dropdown.
• ‘optionsText’ — For displaying the data.

In the JAVASCRIPT there is a sample json payload (sampleJson) and it contain some datas. Inside this viewmodel(myViewModel) there is a KO variable(aviliableNames) for holding the data’s.
ko.toJS() is a built-in method used to convert the json to the corresponding KO value. Now the data is in KO variable, So it will display the name in dropdown when we apply the bindings ‘ko.applyBindings();’

Consider the Example-2: take a look at this fiddle.

The Example-2 follows the same functionality and behavior that I have done in Example-1. The only change is for the structuring because of the KnockoutJS Components. By using this KO components I can able to separate the HTML and viewmodel. The viewmodel is same as the Example-1 follows and HTML have less code compare to the Example-1. The only thing is we need to add a Binding element(component) for integrating both the HTML and viewmodel together. All other HTML codes are assigned to a new variable (template) as a string . For registering this component we need to call ko.components.register() API. After applying the bindings ko.applyBindings() the data will display in the dropdown as same as in the Example-1.

So far, I’ve exposed facts about components. However, in this last section, I must say that in most situations I prefer to use components for their advantages:

.modularity
.low coupling
.easy reuse
.testability
.binding syntax