In this post we will learn step by step to setup development environment for Knockout.js in Visual Studio 2013.

Also we will see how to enable intellisense for KO in VS2013.

To start with, I am going to create an ASP.NET Empty Web Application. We will set up this empty web application for Knockoutjs development.

image

There are two ways you can add Knockout library in project

  1. Manually adding KO JS files locally in project
  2. Using NuGet to add KO reference files in project

I am adding references using NuGet. We need to add following references in project

  1. Knockout.js
  2. jQuery

To manage NuGet package right click on project and from context menu select option Manage Nuget Package. You will get below dialog box. In search option put Knockout. You will get knockoutjs as first option. Click on Install.

clip_image002

Once you have Knockoutjs installed, search for jQuery and install that in project as well. After successful installation of these two libraries you will find a Scripts folder in project. Scripts folder will have files for Knockoutjs and jQuery.

clip_image003

Now go ahead and add

  • HTML file
  • JS file in project

On HTML you need to add following references. In below scenario default.js is file we are adding. We will write code behind script in default.js file.

clip_image002[6]

Next step is very important. We need to enable intellisense on default.js to work with KO. To enable this drag and drop knockout-3.0.0.debug.js file on default.js. After dragging and dropping you should able to see following reference added.

clip_image004

 

Now you will find intellisense is working fine in default.js to work with jQuery and KO. This is what all you need to do to set up VS2013 to work with Knockoutjs. In next post I will show you how to write first MVVM App in three simple steps using Knockoutjs. I hope you find this quick post useful. Thanks for reading.

Advertisements

8 thoughts on “Setting up Visual Studio 2013 for Knockoutjs Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s