Knockout.js is a JavaScript library useful for creating interactive and responsive web applications. Knockout implements Model-View-View Model(MVVM) design pattern for JavaScript. In this article I will show you how to start working in Knockout.js
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 Manage NuGet Packages.
![Manage Nuget Package]()
Figure 3: Manage Nuget Package
Step 4
Now we need to search and install the knockout.js library on the website. For that we will type Knockout.js in the search box, then we will install the knockout.js library on the website.
![Knockout.js Search]()
Figure 4: Knockout.js Search
![Knockout Installation]()
Figure 5: knockout Installation
After successful installation, we will close the Manage Nuget Package window.
Step 5
For using the Knockout.js library, we need to install jQuery in the website. For installing jQuery we will perform the same operation that we did for installing the Knockout.js library.
![jQuery Search]()
Figure 6: jQuery Search
Figure 7: jQuery Installation
Step 6
Now we will check the website that the script folder has been added to the website. The script folder contains Knockout.js and jQuery files.
![Library Added]()
Figure 8: Library Added
So the jQuery and Knockout.js files have been added successfully.
Step 7
Now we need to add a Web Form to the website. By right-clicking add a Web Form to the website.
![Add WebForm]()
Figure 9: Add webform
After adding the Web Form on the website, we will write its name.
![Write Name]()
Figure 10: Write name of the Web Form
Step 8
Now we need to write the following in the webform:
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <p> First Name :<span data-bind="text:firstName"/></p>
- <p> Last Name :<span data-bind="text:LastName"/></p>
-
- </div>
- </form>
- <script src="Scripts/knockout-3.3.0.js"></script>
- <script type="text/javascript">
- var vm =
- {
- firstName: "Yatendra",
- LastName: "Sharma"
- };
- ko.applyBindings(vm);
- </script>
- </body>
- </html>
Step 9
We will design the Web Form like the following:
![Design Form]()
Figure 11: Design Form
Step 10
Now we will execute the website using the F5 key. After execution the following window appears on the screen.
![Execute Window]()
Figure 12: Execute Window
So the execution window shows that the ko.applyBindings(vm) function is working perfectly.
Summary
In this article I explained how to set the Visual Studio 2013 for the knockout.js development and how to start working on knockout.js .
I hope this article will be helpful for beginners if they want to start working on knockout.js or install it in Visual Studio 2013.