Post
Ask Question

Introduction To KnockOut.Js - Part 1

What is KnockOut.js


Knockout.js is a JavaScript library that provides two-way data binding between our user interfaces and data model. Means we can dynamically bind our data i.e. any time we can update our UI. By using Knockout.js it is very easy & simple. There are other features also we will learn step by step.

Features of Knockout.js

  1. Automatic Refresh.
  2. Dependency Tracking - If our data model gets change then it automatically updates in UI.
  3. Declarative Binding - We can bind data to DOM using data-bind attribute to DOM elements.
  4. Templating - No need to show any internal structure.
  5. Trivially Extensible - Reuse of code is very easy in minimum lines of code.

Common Benefits

  1. It is purely based on JavaScript library.
  2. No need to require any architecture changes i.e. we can work on web applications using UI part.
  3. Compatible with all browsers.

Step 1: Create simple project with empty MVC application using VS 2013.

Step 2: Click on add KnockOut.js & JavaScript files from Manage Nuget packages.

Step 3:

Now add one JavaScript file for JavaScript & Knockout.js code.

Also add references to above created file as follows,

  1. /// <reference path="jquery-2.2.0.js" />  
  2. /// <reference path="knockout-3.4.0.js" />  

You can drag drop this above two files on top of our new JavaScript file,

Step 4:

Now create one controller & write any action method in that controller. Now create one View for above action method & write the following code in View.

  1. <head>  
  2.     <script src="~/Scripts/jquery-2.2.0.js"></script>  
  3.     <script src="~/Scripts/knockout-3.4.0.js"></script>  
  4.     <script src="~/Scripts/Before-KO.js"></script>  
  5. </head>  
  6. <body>  
  7.     <h2>Using Knockout.js</h2>  

First Name:

  1. <input type="text" data-bind="value:myFirstName" />  
  2. <br />  

Middle Name:

  1. <input type="text" data-bind="value:myMiddleName" />  
  2. <br/>  

Last Name:

  1. <input type="text" data-bind="value:myLastName" />  
  2. <br/>  

Output :

  1. <span data-bind="text:finalOutput"></span>  
  2. </body>  

Step 5:

Write the following code to our JavaScript files,

  1. /// <reference path="jquery-2.2.0.js" />  
  2. /// <reference path="knockout-3.4.0.js" />  
  3. $(document).ready(function()  
  4. {  
  5.     //// code using KnockOut.js  
  6.     var myDetailViewModel =  
  7.         {  
  8.             myFirstName: ko.observable("Rupeshkumar"),  
  9.             myMiddleName: ko.observable("J..."),  
  10.             myLastName: ko.observable("Kahane"),  
  11.         };  
  12.     myDetailViewModel.finalOutput = ko.computed(function()   
  13.     {  
  14.         var x = this.myFirstName() + " " + this.myMiddleName() + " " + this.myLastName();  
  15.         return x;  
  16.     },   
  17.     myDetailViewModel);  
  18.     ko.applyBindings(myDetailViewModel);  
  19. })  

Step 6:

Now run application,

Suppose we change values in our textbox then our output will be like the following:

ViewModel

  1. var myDetailViewModel =  
  2.     {  
  3.         myFirstName: ko.observable("Rupeshkumar"),  
  4.         myMiddleName: ko.observable("J..."),  
  5.         myLastName: ko.observable("Kahane"),  
  6.     };  

In above code myDetailViewModel is ViewModel name & Observable is used to bind a data & if there are any changes in data from UI then it will notify automatically.

This data is bind  to DOM using data-bind attribute to View as follows,

  1. <input type="text" data-bind="value:myFirstName" />  
  2. <input type="text" data-bind="value:myMiddleName" />  
  3. <input type="text" data-bind="value:myLastName" />  

Computed observable function

  1. myDetailViewModel.finalOutput = ko.computed(function()  
  2. {  
  3.     var x = this.myFirstName() + " " + this.myMiddleName() + " " + this.myLastName();  
  4.     return x;  
  5. },   
  6. myDetailViewModel);  
  7. ko.applyBindings(myDetailViewModel);  

Computed observable function takes three parameters as function name, target ViewModel, options.

To show output in UI i.e. bind data to view is same as above.

  1. <span data-bind="text:finalOutput"></span>  

Summary:

This article helps fresher candidates to understand KnockOut.Js.


Similar Articles