Understanding Observable in Knockout.js

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

• Setting Visual Studio 2013 For Knockout.js Development

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.

Figure 1: Visual Studio

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

Figure 2: Create Website

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.

Figure 3: Manage NuGet

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

Figure 5: Name of Form

Now we will write the code for the observable array.