Post
Ask Question

Understanding Observable in Knockout.js

Before reading this article you first need to read my previous article:

This article explains how to use the Observable Array in Knockout.js. Knockout.js defines an important role when we want to detect and respond to changes on one object, we uses the observable. An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes. To apply these features of KO we need to declare our model properties as observable, because there is special JavaScript that defines the important role in notifying subscribers about changes and can automatically detect dependencies. KO is the most important feature useful for the Automatic refresh of UI. It can be done when the view will be notified on the changes of ViewModel.

Step 1

Start Visual Studio.

Visual Studio

Figure 1: Visual Studio 

Step 2

Now for creating a website, click on File, go to New and click on Web Site.

Create Website

 Figure 2: Create Website

Step 3

Now we need to add the knockout.js library to our website. To do that we will manage the NuGet Package and for that we will right-click on the website and click on the NuGet Packages.

Manage NuGet

Figure 3: Manage NuGet 

Step 4

Now the next step to search and install the Knockout.js and jQuery library in the website as I have shown in my previous article. After adding the Knockout.js library we need to add the Web Form to the Website. By right-clicking add a Web Form to the website.


Figure 4: Add Web Form 

After adding the Web Form on the website, we will write its name as in the following:

Name of Form

Figure 5: Name of Form 

Step 5

Now we will write the code for the observable array.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Understanding Observables in Knockout.js</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <p>First Name :<span data-bind="text: firstName" /></p>  
  13.             <p>Middle Name :<span data-bind="text: MiddleName" /></p>  
  14.             <p>Last Name:<span data-bind="text: LastName"></span></p>  
  15.   
  16.         </div>  
  17.         <hr />  
  18.         <div>  
  19.             <p>First Name<asp:TextBox ID="txname" runat="server" data-bind="value:firstName"></asp:TextBox></p>  
  20.             <p>Middle Name<asp:TextBox ID="txtlstnme" runat="server" data-bind="value:MiddleName"></asp:TextBox></p>  
  21.             <p>Last Name<asp:TextBox ID="txtlastname" runat="server" data-bind="value:LastName"></asp:TextBox></p>  
  22.         </div>  
  23.         <hr />  
  24.         <p>Full Name :<span data-bind="text: fullName"> </span></p>  
  25.     </form>  
  26.     <script src="Scripts/knockout-3.3.0.js"></script>  
  27.     <script type="text/javascript">  
  28.         var vm =  
  29.             {  
  30.                 firstName: ko.observable("yatendra"),  
  31.                 MiddleName: ko.observable("Kumar"),  
  32.                 LastName: ko.observable("Sharma")  
  33.             };  
  34.         vm.fullName = ko.dependentObservable(function () {  
  35.             return vm.firstName() + " " + vm.MiddleName() + " " + vm.LastName();  
  36.         });  
  37.         ko.applyBindings(vm);  
  38.     </script>  
  39. </body>  
  40. </html>  

In this code I have used the observable to detect and respond to changes on one object. So the observable is helpful when we want changes on the multiple values and need repeated sections of the UI to appear and disappear as items are added and removed.

Step 6

After writing the code, now we will execute the website using the F5 key. After execution the following window appears on the screen.

Execution Window

Figure 5: Execution Window 

Step 7

Now if we change in the first name in the text box then the upper part of the window changes automatically.


So it shows that the observable is working perfectly when we change in one part then the changes happens simultaneously in the other connecting parts.

Summary

This article explained how the observable works in the Knockout.js and how to use the Observable Knockout.js in the Visual Studio 2013.

I hope this article will be helpful for the beginners if they want to use observables in Knockout.js.


Similar Articles