Introducing the Knockout.Unobtrusive Plugin

Last month, I blogged about how much I love KnockoutJS, a fantastic JavaScript MVVM framework for creating rich, dynamic UIs. In that post, I also shared my only real qualms with Knockout: the exclusive use of data-bind attributes for binding a view to the underlying ViewModel. And while there is much about the declarative style bindings Knockout uses that I like, I thought it would be a fun (and hopefully useful) exercise to take my original unobtrusive post and try to formalize my thinking into a plugin. Derick Bailey deserves the credit for much of the inspiration here, so be sure to check out the awesome work he’s doing with the Backbone.ModelBinding plugin.

Knockout.Unobtrusive :: Unobtrusive model binding syntax for KnockoutJS

Over the last week, I’ve spent some time here and there taking the code from my original post and using it as inspiration to create a plugin for Knockout that allows developers to use script-based bindings, rather than the default data-bind syntax. The result is Knockout.Unobtrusive, which I’ve placed on GitHub. I should note here that using Knockout.Unobtrusive isn’t the only option if you’re looking to clean up some of the clutter in your data-bind attributes. Ryan Niemeyer has a great post on cleaning up Knockout Views that I recommend you read. But, if you’re looking to go farther, read on!

This plugin was developed using a test-first approach, with qUnit as my JavaScript test framework of choice. The core plugin itself was authored using CoffeeScript, and the full source can be found here.

CoffeeScript, if you’re not familiar, is a language that compiles 1:1 to JavaScript. I’ve been using it for several weeks now, and I’m sold. During development, I’m running the CoffeeScript compiler locally, with instructions to watch the above coffee file for changes, and to re-compile that file into JavaScript on each change. The resulting JavaScript file is then run against my qUnit tests.

Even if you’re not familiar with CoffeeScript,  the code at the link above should be pretty easy to mentally parse. If, however, you would rather take a look at the JavaScript that CoffeeScript generates, you can check it out here in the source for Knockout.Unobtrusive.

Getting Started with Knockout.Unobtrusive

Getting started with the plugin is pretty easy. First, download the source from my GitHub repository and include a reference to knockout.unobtrusive.js just below Knockout proper.

Note: If you cannot view the embedded Gist above for any reason, click here to view the embedded code.

Once you’ve added Knockout.Unobtrusive to your application, you can start moving your existing bindings (data-bind) into a bindings object, and/or create new bindings as needed. I have a full example up on JSFiddle, and embedded below, but let’s take a look at some of the HTML from that fiddle.

Note: If you cannot view the embedded Gist above for any reason, click here to view the embedded code.

Page 1 of 2 | Next page