Click here to Skip to main content
11,795,568 members (78,358 online)
Click here to Skip to main content

Learn knockout in 3 days - Day 1

, 20 Aug 2014 CPOL 14K 357 42
Rate this:
Please Sign up or sign in to vote.
Step by Step learning of knockout framework - Day 1


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. 


  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
  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
  5. 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.


    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


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. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

pradeep shet
Team Leader
India India
I am having 5.8 year of Experience in microsoft technology like Asp.Net, WCF, MVC, MSSQL, Silverlight, LINQ with jquery. I am good in Object Oriented Programming. I am also a MCTS certified.

You may also be interested in...

Comments and Discussions

SuggestionNeeds improvement Pin
Manvir Kaur20-Aug-15 20:07
memberManvir Kaur20-Aug-15 20:07 
GeneralRe: Needs improvement Pin
pradeep shet21-Aug-15 0:24
memberpradeep shet21-Aug-15 0:24 
GeneralMy vote of 3 Pin
ravithejag22-Jan-15 20:18
memberravithejag22-Jan-15 20:18 
QuestionNot an article Pin
Rage3-Sep-14 0:54
professionalRage3-Sep-14 0:54 
QuestionWhy 3 Days? Pin
Peter Leow2-Sep-14 23:22
professionalPeter Leow2-Sep-14 23:22 
AnswerRe: Why 3 Days? Pin
pradeep shet3-Sep-14 0:29
memberpradeep shet3-Sep-14 0:29 
GeneralRe: Why 3 Days? Pin
Peter Leow3-Sep-14 3:14
professionalPeter Leow3-Sep-14 3:14 
AnswerRe: Why 3 Days? Pin
Sandeep Singh Shekhawat3-Sep-14 0:32
professionalSandeep Singh Shekhawat3-Sep-14 0:32 
GeneralRe: Why 3 Days? Pin
Peter Leow3-Sep-14 3:17
professionalPeter Leow3-Sep-14 3:17 
GeneralRe: Why 3 Days? Pin
Sandeep Singh Shekhawat3-Sep-14 3:23
professionalSandeep Singh Shekhawat3-Sep-14 3:23 
GeneralRe: Why 3 Days? Pin
pradeep shet3-Sep-14 4:33
memberpradeep shet3-Sep-14 4:33 
GeneralMy vote of 2 Pin
leacasas21-Aug-14 9:08
memberleacasas21-Aug-14 9:08 
GeneralRe: My vote of 2 Pin
speedofspin22-Aug-14 0:04
memberspeedofspin22-Aug-14 0:04 
GeneralRe: My vote of 2 Pin
Marla Sukesh22-Aug-14 1:09
professional Marla Sukesh22-Aug-14 1:09 
QuestionMissing images Pin
dangquangck220-Aug-14 22:44
memberdangquangck220-Aug-14 22:44 
AnswerRe: Missing images Pin
pradeep shet21-Aug-14 4:50
memberpradeep shet21-Aug-14 4:50 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun20-Aug-14 21:03
memberHumayun Kabir Mamun20-Aug-14 21:03 
QuestionImages? Pin
Akhil Mittal 20-Aug-14 19:23
mvp Akhil Mittal 20-Aug-14 19:23 
AnswerRe: Images? Pin
Gihan Liyanage20-Aug-14 20:26
professionalGihan Liyanage20-Aug-14 20:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 20 Aug 2014
Article Copyright 2014 by pradeep shet
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid