Knockout Intellisense in Visual Studio 2012 | John Papa

John Papa

Evangelist on the loose

Knockout Intellisense in Visual Studio 2012

posted by John with 23 comments

If you enjoy developing with Knockout.js, then you’ll be glad to hear that support has been added for Knockout Intellisense in Visual Studio 2012! These features are pretty cool and will save me and other developers from senseless typos. Developers who are newer to Knockout.js will enjoy the intellisense as an easy way to quickly learn the available built-in bindings.

For this post I’ll explore these new features by using the new SPA Template included in the same release. You can read more about the SPA Template in my post Inside the ASP.NET SPA Template.

The ASP.NET and Visual Web Developer teams released the ASP.NET and Web Tools 2012.2 update (Release Candidate) last week. There were many features in this release that you can check them out in Scott Gu’s post here. In this post I’ll focus on a tooling feature that adds Visual Studio 2012 editor support for Knockout IntelliSense.

Knockout.js is a popular data binding library that provides databinding between targets elements in HTML (Views) and source objects in JavaScript (ViewModels). You can learn more about Knockout at my Pluralsight course Building HTML5 and JavaScript Apps with MVVM and Knockout.

With this release, when you are in the HTML editor you will see intellisense when you type in a data-bind attribute. The following features will appear:

  • db snippet for creating the data-bind attribute
  • Built in bindings (left side of : )
  • Custom binding handlers (left side of : )
  • View model members (right side of : )

data-bind

Typing data-bind="" inside of an HTML element can become quite monotonous. Not anymore though. One of the features in this update is a snippet that types it for you when you type db inside of a tag. Place your cursor in an opening HTML tag like this one (right after the first v in div):

<div></div>

Then type db and get:

<div data-bind="Name: Value"></div>

Built in Bindings

When type in a data-bind attribute you will see a list of the built in bindings that Knockout supports and any custom bindings that you created and are available in your context. If you don’t see it you can hit CTRL-<SPACE> and it should appear in a list.

Knockout Region Highlighting

By default you get a new “Knockout Region” that you can change the foreground and background color. This is the one thing I don’t like, and I changed my examples to use a more subtle background color that blends in with my dark theme background. I’ll show you how to change it. Notice how the background of the Knockout Region (the data-bind attribute) stands out in the image below?

Under Tools | Options to to Environment and then Fonts and Colors. Then you can find the Knockout Region and you will likely want to change the Item Background color from its default. In my dark theme, the color was a bright grey by default. It made it really hard to read. So I changed it to a more subtle color. Hopefully this will change in the final release, but hey, its easy enough to change on your own (see below).

If you type multiple bindings in the same data-bind attribute, you’ll separate them with a comma. When you type the comma you can again get intellisense for the available Knockout bindings. Very cool.

Custom Bindings

The cool part is that any custom bindings that you create are also accessible in the intellisense. In the SPA Template they give you 4 custom Knockout binding handlers. These are located in the todo.bindings.js file which is included in the todo script bundle in the Index.cshtml view. Notice below how the blurOnEnter custom binding appears.

I’m a big fan testing new features so I know what works and what doesn’t work. So I tested this out by creating a new JavaScript file called todo.mybindings.js. I added a binding handler called fakeBinding to it. Then I added a reference to it in the /scripts/_references.js file. Then I went back to the View and my fakeBinding showed up in the intellisense. This is a really nice feature. Of course, if you add a binding you’ll want to include your new JavaScript file in the page too (in a script tag or in a script bundle).

/// <reference path="jquery-1.8.2.js" />
/// <reference path="jquery-ui-1.9.2.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="knockout-2.2.0.debug.js" />
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="app/todo.mybindings.js" />
/// <reference path="app/todo.bindings.js" />
/// <reference path="app/todo.datacontext.js" />
/// <reference path="app/todo.model.js" />
/// <reference path="app/todo.viewmodel.js" />

ViewModel Members

Once you type the colon in the data-bind attribute you want to enter a member of your ViewModel. The intellisense is smart enough to see that you’ve bound the View to a ViewModel and it finds the accessible members in that ViewModel and lists them in the intellisense. In the SPA Template there are 4 accessible members of the ViewModel todoApp.todoListViewModel that are exposed via the Revealing Module Pattern.

    // returned from the module todoApp.todoListViewModel
    return {
        todoLists: todoLists,
        error: error,
        addTodoList: addTodoList,
        deleteTodoList: deleteTodoList
    };

These now appear in the intellisense, as shown below.

When you add new members to the ViewModel they will appear in the intellisense list, too.

Module Pattern Is Helpful

If you use the Revealing Module Pattern, which is what the SPA Template and all of my SPA course material promotes, then you’ll get the benefit of just the accessible members of the ViewModel to bind to. The reason this pattern is helpful here is that it limits what members of the module (the viewmodel) are exposed. This eliminates irrelevant members from the intellisense such as members that may be entirely internal to the module. Knockout course specifically in the module “JavaScript Patterns: Spaghetti to Ravioli” where I cover this topic.

From Here

I love this feature especially since I do a lot of Knockout. I see a lot of developers struggle with syntax since we’re just typing in strings int he HTML with no guards against typos. It’s very easy to mistype a binding or a view model member, but this feature should really help. I’d love to see this taken further, too, where we get dot intellisense for nested objects in the view model. This is entirely more complicated to achieve, but hey, it’s my wish list!

tags: asp.net html5 javascript knockout SPA visual studio 2012

23 comments Hide comments

Rob Eisenberg on said:

How does it determine what view model relates to the what view? Does it only understand the revealing module pattern? or does it understand CommonJS and AMD modules as well? Does it understand sugared syntax for AMD modules?

    John on said:

    Hi Rob,

    Good questions. I’ve got some of these out to the team to see what they say. You can use the standard Module Pattern too. I’m having a few issues getting it to work in more advanced scenarios such as AMD and when having more separated views and viewmodels. I believe its due to “how” they detect the viewmodel. The bindings are working on all examples I try, however. I’ll update my post when I hear more from the team.

Corey Gaudin on said:

It would be helpful if they allowed you to add a html comment specialized in letting the designer know that a specific region is using a specific JavaScript file that represents the view model. That way when the designer can’t figure it out, we can override it to be very specific.

knockoutJS developer on said:

I don’t quite understand this feature, are you saying that a vsdoc.js file is automatically included for knockoutjs? I am also using kendo ui, and I’ve got a kendo.web-vsdoc.js file but intellisense is not working apparently

    John on said:

    Victor – The Knockout intellisense support is built into the HTML file tooling. You need to install the update and then you can try it out.

Dhana on said:

This update for VS2012 is only half useful when I used require.js in my SPA project. The intellisense doesn’t pickup the bound VM, only works on KO stock methods and bindings … :( am i missing something (other than Resharper! of course)

John on said:

I installed the update but do not get any intellisense for Knockout. Data-bind, ko.applyBindings all still need to be typed manually. What am I missing?

Leave a Reply


(required)


(required)



CAPTCHA Image
*