Click here to Skip to main content
15,867,835 members
Articles / Web Development / ASP.NET

Learn knockout in 3 days - Day 1

Rate me:
Please Sign up or sign in to vote.
4.95/5 (19 votes)
20 Aug 2014CPOL4 min read 49K   637   46   19
Step by Step learning of knockout framework - Day 1

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

    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. 

License

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


Written By
Instructor / Trainer
India India
I am having 15+ year of Experience in technologies like Asp.Net Core, WCF, MVC, MSSQL, LINQ, Angular, C#, Design Pattern, DI, Oracle, HTML5, CSS3, Bootstrap & jquery. I am a coder/trainer by profession.

Comments and Discussions

 
SuggestionNeeds improvement Pin
Manvir Kaur20-Aug-15 20:07
Manvir Kaur20-Aug-15 20:07 
GeneralRe: Needs improvement Pin
Pradeep Shet21-Aug-15 0:24
Pradeep Shet21-Aug-15 0:24 
GeneralMy vote of 3 Pin
ravithejag22-Jan-15 20:18
ravithejag22-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
Pradeep 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
Pradeep Shet3-Sep-14 4:33 
GeneralMy vote of 2 Pin
leacasas21-Aug-14 9:08
leacasas21-Aug-14 9:08 
GeneralRe: My vote of 2 Pin
speedofspin22-Aug-14 0:04
speedofspin22-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
dangquang102020-Aug-14 22:44
dangquang102020-Aug-14 22:44 
AnswerRe: Missing images Pin
Pradeep Shet21-Aug-14 4:50
Pradeep Shet21-Aug-14 4:50 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun20-Aug-14 21:03
Humayun Kabir Mamun20-Aug-14 21:03 
QuestionImages? Pin
Akhil Mittal20-Aug-14 19:23
professionalAkhil Mittal20-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    Praise Praise    Rant Rant    Admin Admin   

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