It's been more than a year when i started learning knockout.js, now I felt it's time to share my experience with you all what i have learnt so far.
As this is my first post on Knockout.js, i am going to introduce you to basics of knockout.js.

Knockout is library written in Javascript, which is based on MVVM
approach for creating rich and responsive websites

Knockout.js become powerful with some of its highlighting features :

Dependency Tracking :

Knockout automatically identifies the changes and updates the UI. Knockout has observable variables and computed variables that computes the values on change which results in dynamic UI.
Basically it’s a view model where we can write this code to track the UI changes

Declarative binding :

Declarative binding is a way to connect UI to the view model. It is commonly written as HTML element’s properties. You can make complex UI dynamic easily.

Template and custom behavior :

You can create templates and custom controls for reusing the code. It just takes few lines to make use of the templates.

With all this features combined together, knockout js helps us to design simple, clean, effective and well organized code.

How knockout.js follows MVVM pattern :

MVVM(Model - View - View Model) pattern breaks complexity into parts, to provide simplicity, flexibility and maintainability of our code.

Model represents data. When using KO, we use service calls or can say ajax calls to fetch data.

View Model contains observables which are bound to UI also does operations in response to the changes in UI. It handles all client side business logic.

View is nothing but the UI , with the help of bindings it communicate with the view model. It sends request to the view model, in response to that view model does the operation and replies. Based on the reply UI state changes.

Let’s walkthrough simple example to understand how knockout js works :

I am creating view model first, which will have all observables and other computed variable and functions.

<script>
var myViewModel=function(){
    this.firstName=ko.observable(”Vipul”);
    this.lastName=ko.observable(”Shetkar”);

    this.fullName=ko.computed(function(){
        return this.firstName()+” ”+this.lastName();
    })
}
</script>

This is how we create view model for simplicity I declared only 2 observables and one computed observable which automatically computes the result on change of any of the 2 observables used inside it. So here in this example, whenever firstName or lastName changes fullName automatically identifies change and computes new value and update it

Now I am creating view that will use binding for automatic UI changes

<h4>First Name</h4>
<input data-bind=”textInput:firstName”/><br/>

<h4>Last Name</h4>
<input data-bind=”textInput:lastName”/>

<h3>Welcome, <span data-bind=”text:fullName”> </span></h3>

Here I am using text and textInput binding. text binding is used to display value of variable (fullName). textInput binding updates the value of observables instantly. There are different types of binding available, each binding affects UI differently like visible, disable, checked, click etc. You can create your own binding

Until you do not activate the knockout binding, nothing will work. To bind UI to view model you have to apply binding as follows:

<script>
    ko.applyBindings(new myViewModel()) //Don’t forget this
</script>

Thanks for reading :)

I am sharing a jsfiddle for the given example along with some other examples

https://jsfiddle.net/VipulS/g1fhf3mr/

https://jsfiddle.net/VipulS/qadqh4hy/

In upcoming post, I will explore more on knockout js custom binding and templates.

References: