Knockout Intellisense in Visual Studio 2012

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):

Then type db and get:

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).

/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
///

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. <My advice is to use the pattern :) If you want to learn more about this pattern, you can check out my 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!