WTE (Web Tools Extension) 1.2 RC is part of the ASP.NET and Web Tools 2012.2 RC and it’s available for download from http://www.microsoft.com/download/details.aspx?id=36053.

Knockout Intellisense is an exciting new feature in WTE 1.2 RC.  Knockout is a declarative JavaScript MVVM system for client-side data binding.  See http://knockoutjs.com/ for complete information and http://learn.knockoutjs.com/ for tutorials. 
Knockout Intellisense allows you to code Knockout quickly and accurately, and custom bindings are fully supported!

With WTE 1.2 RC installed, you can utilize the Knockout Intellisense feature on any web page by:

• Loading Knockout-n.n.n.js or Knockout-n.n.n.debug.js
• Defining a view model in JavaScript as an object or a function
• Calling ko.applyBindings(viewModel) after the page is loaded

Loading Knockout

Add Knockout to an existing project by selecting “Manage Nuget Packages…”:

Search online for “Knockout” and select “Knockoutjs”:

Press “Install”

Drag the Knockout JavaScript file from Scripts to the head of your web page:

Note: to use Knockout with Bundling and Minification, see the “Working with Bundling and Minification” topic below.

Knockout does not require jQuery, but the two work great together.

Defining a View Model

A view model can be defined in one of two ways; see http://knockoutjs.com/ for complete details.

Declare the data structure you want to use as a JavaScript object:

   
      var viewModel = {
        fieldOne: "string",
        fieldTwo: 12345,
        fieldThree: null,
        fieldFour: ko.observable("two way data-binding"),
        fieldFive: ko.observableArray([1,2,3])
      };
   

 Or, declare a function with members describing your data:

   
      function viewModel() {
        this.detailsEnabled = ko.observable(false);
          this.enableDetails = function () {
            this.detailsEnabled(true);
          };
          this.disableDetails = function () {
            this.detailsEnabled(false);
          };
      };
   

Applying Bindings

If you’ve described your view model as an object, bind itusing the syntax:

    ko.applyBindings(viewModel);

If you’ve declared your view model as a function, use the syntax:

    ko.applyBindings(new viewModel());

Note: In either case, it’s critical to bind the view model after the page data has been loaded.  You can do this by either declaring a script block at the end of the page:

    …
   
      …
      ko.applyBindings(viewModel);