Learn knockout in 3 days - Day 1

• Download Knockout.rar - 955.6 KB
• Download Knockout.zip - 1 MB

Introduction

Today every web application is majorly developed with maximum client side scripting because client side programming languages and browser are getting more powerful. JQuery library is majorly used for client side scripting as it provides more flexibility, easy to use and extensibility to work with.

On the top of JQuery, a new library was built which we call as knockout.

Knockout is widely used in today’s world for developing web application. You can say knockout is just defeating the other JavaScript frameworks and even giving tough competition with web server architecture like Asp.Net or MVC. Because using knockout, you can handle all business logics and validation at clientside only you want is the data which can be retreived or fetched using any service oriented technique like webservice, WCF, REST Service, WebAPI and many more.

I will try to cover all topics of knockout in parts. In this Day 1 article I will be covering basic understanding of knockout. 

Agenda 

1. What is knockout.js?
2. Why Knockout.js?
3. Demo example on Observable and Binding 

Once you are done with this article go through the Day 2 Link

Day 2

What is knockout?

Knockout is a JavaScript library that enables us to develop rich, interactive and responsive data driven UI. This library enables us to have declarative binding on the html elements which means, on change of value, UI can be automatically refreshed and value can be reflected back to element which is data bound.

Knockout works mainly on MV-VM (Model-View-ViewModel) architectural pattern. When we talk about MV-VM, three components comes into picture.

Model – It can be an entity or a set of data. This data can be represented in terms of javaScript objects. This data is independent of any UI.

View – It is your UI or a page in which your data is represented. It can be aspx, html, php, asp. Actual speaking View is an UI which represents the state of an ViewModel.

ViewModel – It is a mediator between the model and View. It aggregates one or more model and helps to convert the model information into View information with the help of binding. Actual speaking ViewModel exposes public properties, methods which then replace the values from Model in the View with the help of declarative binding.

Knockout is mainly represented using KO.

Why use knockout ?

Knockout provides various advantages –

1. Automatic refreshing of UI as we can have strong bindings of HTML elements with Model. This can also be terms as dependency tracking.
2. Declarative two way binding- A simple and easy syntax to connect your UI with data Model
3. Extensible to create custom bindings
4. Compatible with all of the latest browsers.
5. Easy way of designing client server architecture with minimum lines of codes. No problem of postbacks.
6. Creating templates
7. No conditional UI refresh required based on Model changes
8. As it’s a javascript library, it can work hand in hand with any other web technology like Asp.Net, WCF, REST services, WebService, WebAPI etc.
9. Helps in building Single Page Application (SPA)

Demo example

Let’s start understanding knockout with sample example.

Before starting the code, initial setup is required.

1. Download the knockout.js library from below link  http://knockoutjs.com/downloads/index.html
2. Add js reference in your webpage
3. script src="Scripts/knockout.js" type="text/javascript"></script>
4. Download the jQuery library from below link  http://jquery.com/download/
4. Add js reference of jQuery in your page. It is true without jQuery knockout can be executed but still without jQuery library it knockout would be like a handicap.
   <script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>

That’ it we are end with the setup

Let’s take a simple two input type textbox for capturing first name & last name of employee and showing the name in label. See how page looks like :

1. Create a view model with KO. This model can be a simple javaScript object and set using ko.observable() method. This helps the model to track any changes in it.

   

2. Suppose we have a 2 span where we wish to show the FirstName and LastName respectively. Use data-bind attribute to bind the model with the DOM element

    

   

3. Activate the knockout engine to execute.

   

   Output:

   

   Here if I change the value in textbox, same value gets reflected in the span when focus is removed from textbox. This is because span is binded with the model and model is an observable object i.e.- change is observed or tracked.
   Suppose you want to see the effect on keydown itelf then set the attribute as 
    

   <input type ="text" name="txtFName" data-bind="value: FirstName. valueUpdate='afterkeydown'" />

   

    

Here I end up with my first article of Day 1. Today we have learnt a theoretical knowledge about knockout, its framework and tried creating simple example. 

In upcoming article, we will go bit deeper and talk regarding

1) Other types of observables

• Dependent Observable
• Observable Array

2) Build-in Bindings

• Binding related to Text and Appearance
• Binding related to Forms elements and events
• Control-Flow binding
• Templates

Conclusion

Knockout framework is a new era of building web application which provides us the strong binding availability and helps us to keep our code clean. Hope you like this article. Please share your comments whether it’s good or bad. Your input is valuable for me to improve.